事件:用户与计算机进行交互(键盘、鼠标)
事件分类:鼠标类,键盘类,表单类,其它类
鼠标类:
鼠标单击事件:click;
鼠标双击事件:dbclick;
鼠标移入事件:mouseover;
鼠标按下松开事件:mouseup;
鼠标按下时发生事件:mousedown;
鼠标移出事件:mouseout ;
鼠标移动时发生事件:mousemove;
键盘类:
键盘按下事件:keydown;
键盘弹起事件:keyup;
表单类:
获取焦点时:focus;
失去焦点时:blur;
内容改变时:change;
输入内容时:input;
其他类:
资源加载:load;(等待所有资源(script标签所有内容及图片)加载完成后执行)
注册事件的方式:
(1)通过 dom 元素的属性注册事件
通过对象名.事件名 = function(){} -->匿名函数
eg:
<input type="button" id="btn">点我</button> <script> // 获取 dom 元素 var btn = document.getElementById('btn'); // 通过 dom 元素的属性注册事件 btn.onclick = function(){ console.log("hello word!"); } </script>
(2)通过标签的属性注册事件
<input type="button" οnclick="fun()">点我</button> <script> function fun(){ console.log("hello word!"); } </script>
事件监听器:
addEventListener(事件类型,处理函数,是否捕获) 绑定、捕获事件
removeEventListener(事件类型,处理函数,是否捕获) 解除绑定
(是否捕获这个参数是boolean类型,默认为false:冒泡;true为捕获)
<style type="text/css"> div{ border: 1px solid #000; } #d1{ width: 700px; height: 700px; } #d2{ width: 500px; height: 500px; } #d3{ width: 300px; height: 300px; } </style> <div id="d1"> 中国 <div id="d2"> 湖北 <div id="d3">武汉</div> </div> </div> <script type="text/javascript"> var d1 = document.getElementById("d1"); var d2 = document.getElementById("d2"); var d3 = document.getElementById("d3"); d1.addEventListener("click",function(event){ var event = event || window.event; alert("中国") event.stopPropagation(); //阻止事件冒泡 W3C标准(兼容性的问题:IE8及以下) event.cancelBubble = true; //阻止事件冒泡 IE },true) d2.addEventListener("click",function(){ alert("湖北") },true) d3.addEventListener("click",function(){ alert("武汉") },true)
</script>
//结果是只有中国弹出来,其它没有
事件冒泡:系统默认,由最层向最外层进行传递
事件捕获:通过手动更改,由最外层向最里层进行传递
阻止事件冒泡:stopPropagation()
行为:当有用户操作时所带来的后果
例如:(1)form表单点击提交按钮提交后,带来的后果是表单提交了
(2)a标签点击以后,带来的后果是页面跳转
(3)当你在网页上点鼠标右键时,带来的后果是会出现一个右键菜单选项
以上这些行为都是默认行为,默认行为也称为默认事件,有时候我们是不需要使用这些默认行为的,此时我们就得想办法阻止默认行为
阻止默认行为有三种方法:针对注册事件
(1)return false;
<a href="http://www.baidu.com" id="a1">百度</a> <script type="text/javascript"> var a1 = document.getElementById("a1"); a1.onclick = function(){ return false //常用的 }
</script>
(2)preventDafault();
<a href="http://www.baidu.com" id="a1">百度</a>
<script type="text/javascript">
a1.onclick = function(){
var event = event || window.event event.preventDefault(); //W3C标准
}
</script>
(3)returnValue = false;
<a href="http://www.baidu.com" id="a1">百度</a> <script type="text/javascript"> a1.onclick = function(){ var event = event || window.event event.returnValue = false //IE8及以下使用
} </script>
如果事件绑定是用addEventListener来实现的,那阻止默认行为必须用e.preventDefault=true。