听课笔记(七)

如何绑定一个事件?

(一) ele.onxxx = function(event){} ------- 兼容性特别好,但是一个元素的同一事件只能绑定处理函数

------- 基本等同于写在HTML行间上

-------程序this指向的是dom元素本身

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="width:200px;height:200px;background-color: red"             
    onclick="console.log(2333)"></div>  <!-- HTML行间写法,不用写function,直接写执行语句 -->

<script type="text/javascript">
  var div = document.getElementsByTagName('div')[0];
  div.onclick = function(){
  	console.log('22')
  }
  div.onclick = function(){
  	console.log('8888')
  }
</script>
</body>
</html>

(二) obj.addEventListener(type,fn,useCapture) ------ IE9以下不兼容,可以一个事件绑定多个处理程序

------ 程序this指向的是dom元素本身

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="width:200px;height:200px;background-color: red" >
		<p>我是p标签</p>
	</div><!-- 行间写法,不用写function,直接写执行语句 -->

<script type="text/javascript">
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];
  p.addEventListener('click',function(event) {
  	console.log('6666')
    // event.stopImmediatePropagation();//把p绑定的事件,即p上面的Dom标签的事件都屏蔽
    // event. event.stopPropagation();//屏蔽了p上面的Dom标签的事件
    // event.cancelBubble = true;//IE独有
  },false)
  p.addEventListener('click',function(event) {
  	console.log('99999999')
  },false)
  div.addEventListener('click',function () {
  	console.log('55555');
  },false)
</script>
</body>
</html>

我们会看到使用这种方式为元素添加点击事件,他有第三个参数 useCapture ------ 这个参数是拿来干什么的呢?

当 useCapture 为 false:事件句柄在冒泡阶段执行, true:事件句柄在捕获阶段执行

我参考了链接 https://my.oschina.net/u/1454562/blog/205010

懂得了事件执行的模型有两个关键词 ----> 捕获,冒泡

捕获: 比如上述例子,div包裹着p标签,当你点击p标签的时候,当然最外层有什么body,html,Window,所以当鼠标点击下去,将会从最外层,经过一系列传递到达p,这个过程叫做捕获

冒泡: 当传递到p标签的时候,事件又会像水底的泡泡一样穿出,直到window结束

(三) obj.attachEvent('on'+type,fn) ------ IE独有,一个事件同样可以绑定多个处理程序

------ 程序this指向的是window

注意

(1) IE没有捕获事件

(2) 默认触发顺序,先捕获再冒泡

(3) focus,blue,change.submit,reset,select 等事件不冒泡

如何解除事件绑定?

(一) ele.onxxx = null

(二) ele.removeEventListener(type,fn,false) ----此处的 fn 不能是一个匿名函数 (因为你移除和绑定的需要时同一个函数)

var div = document.getElementsByTagName('div')[0];
  div.addEventListener('click',test,false);
  function test(){
  	console.log('2222');
  }
  div.removeEventListener('click',test,false);

(三) ele.detachEvent('on+type,fn)

如何阻止默认事件?

document.oncontextmenu = function(e){
  	canceHandle(e);
  	// return false;
  	// e.preventDefault();
  	// e.returnValue = false;
  }
  //封装后的阻止默认事件
  function canceHandle(event) {
  	if(event.preventDefault)
  	{
  		event.preventDefault();

  	}else
  	{
  		event.returnValue = fasle;
  	}
  }

如何绑定一个事件?

注意

如何解除事件绑定?

如何阻止默认事件?

猜你喜欢