Js-三大事件(鼠标事件、键盘事件、html事件)
2018-03-31 11:28
639 查看
鼠标事件click:单击dblclick:双击mousedown:鼠标按下mouseup:鼠标抬起mouseover:鼠标悬浮mouseout:鼠标离开mousemove:鼠标移动mouseenter:鼠标进入mouseleave:鼠标离开[html] view plain copy <button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
[html] view plain copy <script>
function myClick() {
console.log("你单击了按钮!");
}
function myDBClick() {
console.log("你双击了按钮!");
}
function myMouseDown() {
console.log("鼠标按下了!");
}
function myMouseUp() {
console.log("鼠标抬起了!");
}
function myMouseOver() {
console.log("鼠标悬浮!");
}
function myMouseOut() {
console.log("鼠标离开!")
}
function myMouseMove() {
console.log("鼠标移动!")
}
function myMouseEnter() {
console.log("鼠标进入!")
}
function myMouseLeave() {
console.log("鼠标离开!")
}
键盘事件keydown:按键按下keyup:按键抬起keypress:按键按下抬起[html] view plain copy <body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
[javascript] view plain copy <script>
/*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束,字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
</script>
HTML事件load:文档加载完成select:被选中的时候change:内容被改变focus:得到光标resize:窗口尺寸变化scroll:滚动条移动[html] view plain copy <body onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body>
[html] view plain copy <script>
window.onload = function () {
console.log("文档加载完毕!");
};
/*window.onunload = function () {
alert("文档被关闭!");
};*/
/*打印选中的文本*/
function mySelect(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*内容被改变时*/
function myChange(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*得到光标*/
function myFocus() {
console.log("得到光标!");
}
/*窗口尺寸变化*/
window.onresize = function () {
console.log("窗口变化!")
};
/*滚动条移动*/
window.onscroll = function () {
console.log("滚动");
}
</script>
事件模型:[html] view plain copy <body>
<!--脚本模型:行内绑定-->
<button onclick="alert('hello')">hello</button>
<!--内联模型-->
<button onclick="showHello()">hello2</button>
<!--动态绑定-->
<button id="btn">hello3</button>
</body>
[html] view plain copy <script>
function showHello() {
alert("hello");
}
/*DOM0:同一个元素只能添加一个同类事件
* 如果添加多个,后面的会把前面的覆盖掉*/
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello");
};
btn.onclick = function () {
alert("hello world");
};
/*DOM2:可以给一个元素添加多个同类事件*/
btn.addEventListener("click", function () {
alert("hello1");
});
btn.addEventListener("click", function () {
alert("hello2");
});
/*不同浏览器的兼容写法*/
/*IE*/
if (btn.attachEvent) {
btn.attachEvent("onclick", function () {
alert("hello3");
});
/*W3C*/
} else {
btn.addEventListener("click", function () {
alert("hello4");
})
}
</script>
事件冒泡与事件捕获:[css] view plain copy <style>
#div1{
width: 400px;
height: 400px;
background-color: #0dfaff;
}
#div2{
width: 300px;
height: 300px;
background-color: #33ff66;
}
#div3{
width: 200px;
height: 200px;
background-color: #fff24a;
}
#div4{
width: 100px;
height: 100px;
background-color: #ff4968;
}
</style>
[html] view plain copy <title>事件冒泡、事件捕获</title>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
</div>
</body>
[html] view plain copy <script>
var div1 = document.getElementById("div1");
div1.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div1");
},false);
var div2 = document.getElementById("div2");
div2.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div2");
},false);
var div3 = document.getElementById("div3");
div3.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div3");
},false);
var div4 = document.getElementById("div4");
div4.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div4");
},false);
</script>
阻止默认事件:[html] view plain copy <body>
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
</body>
[html] view plain copy <script>
function stop(event) {
if (event.preventDefault()) {
event.preventDefault();
} else {
event.returnValue = false;
}
alert("不跳转!")
}
</script>
版权声明:本文为博主原创文章,如有错误,欢迎指正,欢迎转载! https://blog.csdn.net/qwer_df_b/article/details/77509859
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
[html] view plain copy <script>
function myClick() {
console.log("你单击了按钮!");
}
function myDBClick() {
console.log("你双击了按钮!");
}
function myMouseDown() {
console.log("鼠标按下了!");
}
function myMouseUp() {
console.log("鼠标抬起了!");
}
function myMouseOver() {
console.log("鼠标悬浮!");
}
function myMouseOut() {
console.log("鼠标离开!")
}
function myMouseMove() {
console.log("鼠标移动!")
}
function myMouseEnter() {
console.log("鼠标进入!")
}
function myMouseLeave() {
console.log("鼠标离开!")
}
键盘事件keydown:按键按下keyup:按键抬起keypress:按键按下抬起[html] view plain copy <body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
[javascript] view plain copy <script>
/*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束,字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
</script>
HTML事件load:文档加载完成select:被选中的时候change:内容被改变focus:得到光标resize:窗口尺寸变化scroll:滚动条移动[html] view plain copy <body onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body>
[html] view plain copy <script>
window.onload = function () {
console.log("文档加载完毕!");
};
/*window.onunload = function () {
alert("文档被关闭!");
};*/
/*打印选中的文本*/
function mySelect(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*内容被改变时*/
function myChange(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*得到光标*/
function myFocus() {
console.log("得到光标!");
}
/*窗口尺寸变化*/
window.onresize = function () {
console.log("窗口变化!")
};
/*滚动条移动*/
window.onscroll = function () {
console.log("滚动");
}
</script>
事件模型:[html] view plain copy <body>
<!--脚本模型:行内绑定-->
<button onclick="alert('hello')">hello</button>
<!--内联模型-->
<button onclick="showHello()">hello2</button>
<!--动态绑定-->
<button id="btn">hello3</button>
</body>
[html] view plain copy <script>
function showHello() {
alert("hello");
}
/*DOM0:同一个元素只能添加一个同类事件
* 如果添加多个,后面的会把前面的覆盖掉*/
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello");
};
btn.onclick = function () {
alert("hello world");
};
/*DOM2:可以给一个元素添加多个同类事件*/
btn.addEventListener("click", function () {
alert("hello1");
});
btn.addEventListener("click", function () {
alert("hello2");
});
/*不同浏览器的兼容写法*/
/*IE*/
if (btn.attachEvent) {
btn.attachEvent("onclick", function () {
alert("hello3");
});
/*W3C*/
} else {
btn.addEventListener("click", function () {
alert("hello4");
})
}
</script>
事件冒泡与事件捕获:[css] view plain copy <style>
#div1{
width: 400px;
height: 400px;
background-color: #0dfaff;
}
#div2{
width: 300px;
height: 300px;
background-color: #33ff66;
}
#div3{
width: 200px;
height: 200px;
background-color: #fff24a;
}
#div4{
width: 100px;
height: 100px;
background-color: #ff4968;
}
</style>
[html] view plain copy <title>事件冒泡、事件捕获</title>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
</div>
</body>
[html] view plain copy <script>
var div1 = document.getElementById("div1");
div1.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div1");
},false);
var div2 = document.getElementById("div2");
div2.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div2");
},false);
var div3 = document.getElementById("div3");
div3.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div3");
},false);
var div4 = document.getElementById("div4");
div4.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div4");
},false);
</script>
阻止默认事件:[html] view plain copy <body>
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
</body>
[html] view plain copy <script>
function stop(event) {
if (event.preventDefault()) {
event.preventDefault();
} else {
event.returnValue = false;
}
alert("不跳转!")
}
</script>
版权声明:本文为博主原创文章,如有错误,欢迎指正,欢迎转载! https://blog.csdn.net/qwer_df_b/article/details/77509859
相关文章推荐
- JS 处理的三大事件(鼠标事件、键盘事件、html事件)
- Js-三大事件(鼠标事件、键盘事件、html事件)
- JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
- JS中的事件:鼠标、键盘、HTML事件
- js监听鼠标点击和键盘点击事件并自动跳转页面
- js鼠标按键事件和键盘按键事件用法实例汇总
- JS鼠标事件、HTML页面事件大全,比较全,推荐收藏
- Cocos2d-JS 键盘、鼠标事件
- js鼠标、键盘事件
- js事件应用--基础(事件对象、鼠标事件、键盘事件)
- js鼠标、键盘事件实例代码
- js 绑定键盘鼠标事件示例代码
- JS基础内容小结(event 鼠标键盘事件)(三)
- 从零开始前端学习[45]:js中的所谓的事件类型,鼠标事件,表单事件,键盘事件以及系统事件
- Js学习---妙味课堂3-1 (事件对象和事件冒泡)--- 获取鼠标+键盘事件
- js鼠标、键盘事件实例代码
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 键盘事件和鼠标事件【js】
- js 鼠标键盘事件穿透 pointer-events
- js鼠标事件和键盘事件