addeventlistener事件参数_你不知道的JavaScript事件总结(详细)

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量2k 收藏 2
点赞数
文章标签： addeventlistener事件参数 addeventlistener事件第三个参数 bootstrap table checkbox 事件 bootstrap 单选按钮点击change事件 只触发一次 cipaddressctrl 事件 class=form-control 添加事件

事件流

JavaScript操作css称为脚本化CSS,而JavaScript与HTML的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。

历史

当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆

两家公司的浏览器开发团队在看待浏览器事件方面还是一致的**。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面**

但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

事件冒泡

IE的事件流叫做事件冒泡(eventy bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)

以下列HTML结构为例，说明事件冒泡、事件捕获及事件流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<script type="text/javascript">
			var box = ('box');
			box.onclick = function(){
				box.innerHTML += 'div\n';
			}
			document.body.onclick = function(){
				box.innerHTML += 'body\n';
			}
			document.documentElement.onclick = function(){
				box.innerHTML += 'html\n';
			}
			document.onclick = function(){
				box.innerHTML += 'body\n';
			}
			window.onclick = function(){
				box.innerHTML += 'window\n';
			}
		</script>
	</body>
</html>

如果单击了页面中的<div>元素，那么这个click事件沿DOM树向上传播，在每一级节点上都会发生，按照如下顺序传播：

注意：所有现代浏览器都支持冒泡，但在具体实现还是有一些差别。IE9以上、Firfox、Chrome、safari 将事件一直冒泡到window对象

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它
以同样的HTML结构为例，说明事件捕获

在事件捕获过程中，document对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即<div>元素

注意：IE9、Firefox、Chrome、safari等现代浏览器都支持事件捕获，但从window对象开始获取

addEventListener(eventType,eventListener,useCapture)方法中的第三个参数设置为true时，即为事件捕获阶段

事件流

​事件流又称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段(capture phase)、处于目标阶段(target phase)和事件冒泡阶段(bubbling phase)

首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件，最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应

事件处理程序

事件处理程序又叫事件侦听器，实际上就是事件的绑定函数。事件发生时会执行函数中相应代码。事件处理程序：

  1. HTML事件处理程序
  2. DOM0级事件处理程序
  3. DOM2级事件处理程序
  4. IE事件处理程序

下面将详细介绍该部分内容

HTML事件处理程序

​ 某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的javascript代码

​ 在事件处理程序函数内部，this等于事件的目标元素

<div style="height:30px;width:200px;background-color:pink;" onclick = " '1';"></div>

在HTML中定义的事件处理程序也可以调用在页面其它地方定义的脚本

<div style="height:30px;width:200px;background-color:pink;" onclick = "test()"></div>
<script>
    function test(){('box').innerHTML+= '1';}    
</script>

HTML事件处理程序会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象。通过event变量，可以直接访问事件对象，不用自己定义它，也不用从函数的参数列表中获取。（下节会重点讲事件对象上的属性）

<div style="height:30px;width:200px;background-color:pink;"onclick = " event.type;"></div>

　在事件处理程序函数内部，可以像访问局部变量一样访问document及该元素本身的成员。如此一来，事件处理程序要访问自己的属性就简单多了

<button value="test" style="height:30px;width:200px;background-color:pink;"onclick = " value;"></button>

缺点

耦合问题

​ 客户端编程的通用风格是保持HTML内容和javaScript行为分离，所以应该避免使用HTML事件处理程序属性，因为这些属性直接混合了javascript和HTML，且不易扩展

DOM0级事件处理程序

​ 通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势

每个元素都有自己的事件处理程序属性，这些属性通常全部小写，将这种属性的值设置为一个函数，就可以指定事件处理程序

注意：以DOM0级方式添加的事件处理程序会在事件流的冒泡阶段被处理 
<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
('box').onclick = function(){this.innerHTML += '1';}    
</script>

​ 可以通过将事件处理程序属性设置为null来删除事件处理程序

缺点

​ 围绕着每个事件目标对于每种事件类型只能添加一个事件处理程序

DOM2级事件处理程序

​ DOM2级事件处理程序定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。

所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。若最后的布尔值不填写，则和false效果一样

注意： IE8浏览器不支持DOM2级事件处理程序

​ 使用DOM2级事件处理程序的好处是可以添加多个事件处理程序，并按照他们添加的顺序触发

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
    var box = ('box');
	('click',function(){this.innerHTML += '1'},false);
	('click',function(){this.innerHTML += '2'},false);    
</script>

得到输出结果为： 12

可以做个延迟操作来验证：

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
    var box = ('box');
    setTimeout(function(){
        ('click',function(){this.innerHTML += '1'},false);    
    },10);
    ('click',function(){this.innerHTML += '2'},false);    
</script>

得到输出的结果为：21

参数

​ 如果希望向监听函数传递参数，可以用匿名函数包装一个监听函数

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
    var box = ('box');
    ("click",function(){
        test('123');
    },false);
    function test(x){box.innerHTML += x;}
</script>

移除

​ 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序时使用的参数相同。这意味着，addEventListener()添加的匿名函数将无法移除。　

以下无效

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
    var box = ('box');
    ("click",function(){
        this.innerHTML += '1'
    },false);
    ('click',function(){
        this.innerHTML += '1'
    },false);    
</script>

以下有效

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
    var handle = function(){this.innerHTML += '1'};
    ("click",handle,false);
    ('click',handle,false);    
</script>

IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8-浏览器只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到事件冒泡阶段

attachEvent()方法的第一个参数是"onclick"，而非DOM的addEventListener()方法中的"click"

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
    var box = ('box');
    ('onclick',function(){this.innerHTML += '1';});
</script>

注意：attachEvent()方法只冒泡到document，且IE10-浏览器支持

this

​ 与其他三个事件处理程序不同，IE事件处理程序的this指向了window,而非被绑定事件的元素。

顺序

​使用attachEvent()方法添加的事件处理程序的触发顺序是有区别的。IE9、10浏览器是按正序执行的，而IE8-浏览器则是按倒序执行的　　

<div style="height:30px;width:100px;background-color:pink;"></div>
<script>
    var box = ('box');
    ('onclick',function(){
        box.innerHTML += '1';
    });
    ('onclick',function(){
        box.innerHTML += '2';
    });
</script>

移除

使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。与DOM方法一样，这也意味着添加的匿名函数将不能被移除。不过，只要能够将对相同函数的引用传给detachEvent()，就可以移除相应的事件处理程序　

以下无效

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
    var box = ('box');
    ("onclick",function(){
        box.innerHTML += '1'
    },false);
    ('onclick',function(){
        box.innerHTML += '1'
    },false);    
</script>

以下有效

<div style="height:30px;width:200px;background-color:pink;"></div>
<script>
var handle = function(){box.innerHTML += '1'};
("onclick",handle,false);
('onclick',handle,false);

总结

​由于IE8-浏览器不支持addEventListener()方法，所以需要配合attachEvent()方法来实现全浏览器的事件绑定兼容写法。同时，由于attachEvent()方法中的this指向window，所以需要对this进行显式修改。

function addEvent(target,type,handler){
    if(){
        (type,handler,false);
    }else{
        ('on'+type,function(event){
            return handler.call(target,event);
        });
    }
}

调用顺序

​如果浏览器同时出现这四种事件处理程序，那么它们的调用顺序在各浏览器中表现并不一致　

<div style="height:100px;width:100px;background:pink;" onclick = "this.innerHTML +='html\n'"></div>
<script>
    var box = ('box');
    if(){
        ('click',function(){this.innerHTML += 'DOM2级\n'})
    }    
    if(){
        ('onclick',function(){box.innerHTML +='IE\n'})
    }
    box.onclick = function(){
        this.innerHTML += 'DOM0级\n';
    }
</script>

【相同点】

如果同时出现HTML事件处理程序和DOM0级事件处理程序，DOM0级会覆盖HTML事件处理程序

【不同点】

　chrome/safari/FF以及IE11浏览器结果为：DOM0级 DOM2级

　IE9、10浏览器结果为：DOM0级 DOM2级 IE

　IE8-浏览器结果为：DOM0级 IE

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持方式不同。本文将详细介绍事件对象

获取事件对象

  1. event对象是事件程序的第一个参数
注意： IE8 浏览器不支持 
<!--IE8-浏览器输出undefined，其他浏览器则输出事件对象[object MouseEvent]-->
<div style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = ('box');
oBox.onclick = function(e){
    box.innerHTML = e;
}

另外一种方法是直接使用event变量

Firefox浏览器不支持

<!--firefox浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent] -->
<div style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = ('box');
oBox.onclick = function(){
    box.innerHTML = event;
}
</script>

兼容

​ 于是，获取事件对象的常见兼容性写法如下

<div style="height:30px;width:200px;background:pink;"></div>
<script>
var oBox = ('box');
oBox.onclick = function(e){
    e = e || event;
    box.innerHTML = e;
}
</script>

​ 通过点击按tab键将焦点切换到button按钮上可以出发focus事件

<button style="height:30px;width:200px;background:pink;"></button>
<script>
var oBox = ('box');
oBox.onfocus = function(e){
    e = e || event;
    box.innerHTML = e.type;
}
</script>

事件目标

​ 关于事件目标，共有currentTarget、target、srcElement这三个属性

currentTarget

​ currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点

IE8 浏览器不支持

currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点

<style>
.in{height: 30px;background-color: lightblue;margin:0 10px;}
</style>
<ul>
    <li class="in">1</li>
    <li class="in">2</li>
</ul>
<script>
    var box = ('box');
	box.onclick = function(e){
    e = e || event;
    var tags =  ('li');
    tags[0].innerHTML = e.currentTarget;
    tags[1].innerHTML = (e.currentTarget === this);
}
</script>

target

​ currentTarget属性返回事件正在执行的监听函数所绑定的节点，而target属性返回事件的实际目标节点

IE8 浏览器不支持

以下代码中，点击该实际目标节点时，颜色变红；移出，颜色变浅蓝

<style>
    #box{background-color: lightblue;}
    .in{height: 30px;}
</style>
<ul>
    <li class="in">1</li>
    <li class="in">2</li>
</ul>
<script>
    box.onclick = function(e){
        e = e || event;
        e.target.style.backgroundColor = 'pink';
    }
    box.onmouseout = function(e){
        e = e || event;
        e.target.style.backgroundColor = 'lightblue';
    }
</script>

srcElement

​ srcElement属性与target属性功能一致

注意：Firefox浏览器不支持 
<style>
#box{background-color: lightblue;}
.in{height: 30px;}
</style>
<ul>
    <li class="in">1</li>
    <li class="in">2</li>
</ul>
<script>
box.onclick = function(e){
    e = e || event;
    e.srcElement.style.backgroundColor = 'pink';
}
box.onmouseout = function(e){
    e = e || event;
    e.srcElement.style.backgroundColor = 'lightblue';
}
</script>

兼容

var handler = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
}

事件代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)，也叫事件委托

事件代理应用事件目标的target和srcElement属性完成。利用事件代理，可以提高性能及降低代码复杂度。

举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

需求：一个ul中有5个li，移入时变蓝，移出时变红

下面分别用常规方法和事件代理方法来实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			// 1.常规方法实现

			/* var lis = ('li');
			for(var i = 0; i < lis.length; i ++){
				lis[i].onmouseover = function (){
					this.style.backgroundColor = 'blue';
				}
				lis[i].onmouseout = function (){
					this.style.backgroundColor = 'red';
				}
			} */
            // 2.事件代理方式实现
			ul.onmouseover = function(e) {
				e = e || event;
				var target = e.target || e.srcElement;
				target.style.backgroundColor = 'blue';
			}
			
			
		</script>
	</body>
</html>

需求：给未来添加的元素添加事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			
			// 模拟未来的某个事件添加了对应的数据
			var ul = ('box');
			setTimeout(function(){
				
				var item = ('li');
				item.innerHTML = '6';
				(item);
			},100)
			/*
			//1.原生方式添加事件 不能触发未来添加元素的事件
			var lis = ('li');
			
			for(var i = 0; i < lis.length; i ++){
				lis[i].onmouseover = function (){
					this.style.backgroundColor = 'blue';
				}
				lis[i].onmouseout = function (){
					this.style.backgroundColor = 'red';
				}
			}
			*/
			
			// 2.事件代理方式实现，可以触发未来添加元素的事件
			ul.onmouseover = function(e) {
				e = e || event;
				var target = e.target || e.srcElement;
				target.style.backgroundColor = 'blue';
			}
			
		</script>
	</body>
</html>

事件冒泡

事件冒泡是事件流的第三个阶段，通过事件冒泡可以在这个阶段对事件做出响应
关于冒泡，事件对象中包含bubbles、cancelBubble、stopPropagation()和stopImmediatePropagation()这四个相关的属性和方法。

bubbles

bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性
发生在文档元素上的大部分事件都会冒泡，但focus、blur和scroll事件不会冒泡。所以，除了这三个事件bubbles属性返回了false外，其它事件该属性都为true

<button style="height: 30px;width: 200px;"></button>
<script>
    //点击按钮时，按钮内容为true，说明click事件默认可冒泡
    var test = ('test');
    test.onclick = function(e){
        test.innerHTML =e.bubbles;//true
    }
</script>
<div style="height: 50px;width: 200px;overflow:scroll;background:pink;line-height:60px;">内容</div>
<script>
    //滚动时，div内容变成false，说明scroll事件默认不可冒泡
    var box = ('box');
    box.onscroll = function(e){
        test.innerHTML = e.bubbles;//false
    }
</script>

stopPropagation()

​ stopPropagation()方法表示取消事件的进一步捕获或冒泡，无返回

注意：ie8 浏览器不支持 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>触发</button>
		<script type="text/javascript">
			var btn = ('btn');
			btn.onclick = function (e){
				e = e || event;
				();
				this.innerText = '阻止冒泡';
			}
			document.body.onclick = function (e){
				alert('冒泡');
			}
		</script>
	</body>
</html>

stopImmediatePropagation()

​ stopImmediatePropagation()方法不仅可以取消事件的进一步捕获或冒泡，而且可以阻止同一个事件的其他监听函数被调用，无返回值

[注意]IE8-浏览器不支持

​ 使用stopIPropagation()方法，可以阻止冒泡，但无法阻止同一事件的其他监听函数被调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button style="width: 200px;">触发</button>
		<script type="text/javascript">
			var btn = ('btn');
			// 可以阻止冒泡,但无法阻止同一事件的其他监听函数被调用
			('click',function (e){
				e = e || event;
				()
				this.innerHTML = '修改了';
			})
			('click',function (e){
				e = e || event;
				this.style.backgroundColor = 'lightblue';
			})
			('click',function (){
				alert('body');
			})
		</script>
	</body>
</html>

使用stopImmediatePropagation()方法，即可以阻止冒泡，也可以阻止同一事件的其他监听函数被调用

<button style="width: 200px;">触发</button>
<script type="text/javascript">
    var btn = ('btn');
    // 可以阻止冒泡,但无法阻止同一事件的其他监听函数被调用
    ('click',function (e){
        e = e || event;
        ()
        this.innerHTML = '修改了';
    })
    ('click',function (e){
        e = e || event;
        this.style.backgroundColor = 'lightblue';
    })
    ('click',function (){
        alert('body');
    })
</script>

cancelBubble

​ canceBubble属性只能用于阻止冒泡，无法阻止捕获阶段。该值可读写，默认值为false。当设置为true是，cancelBubble可以取消事件冒泡

[注意]该属性全浏览器支持，但并不是标准写法 
<button>触发</button>
<script type="text/javascript">
    var btn = ('btn');
    btn.onclick = function (e){
        e = e || event;
        e.cancelBubble = true;
        this.innerText = '阻止冒泡';
    }
    document.body.onclick = function (e){
        alert('冒泡');
    }
</script>

兼容

var handler = function(e){
    e = e || event;
    if(){
        ();
    }else{
        e.cancelBubble = true;
    }
}

事件流阶段

eventPhase

​ eventPhase属性返回一个整数值，表示事件目前所处的事件流阶段

0表示事件没有发生，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段

[注意]IE8-浏览器不支持

【1】以下代码返回2，表示处于目标阶段

<button>
    事件流
</button>
<script type="text/javascript">
    var btn = ('btn');
    btn.onclick = function (e){
        e =  e || event;
        this.innerHTML = e.eventPhase + '阶段';
    }
</script>

【2】以下代码返回1，表示处于捕获阶段

<button>
    事件流
</button>
<script type="text/javascript">
    var btn = ('btn');
    ('click',function(e){
        e = e || event;
        btn.innerHTML += e.eventPhase +'阶段';
    },true);
</script>

【3】以下代码返回3，表示处于冒泡阶段

<button>
    事件流
</button>
<script>
    ('click',function(e){
        e = e || event;
        btn.innerHTML += e.eventPhase +'阶段';
    },false);
</script>

取消默认行为

​ 常见的默认行为有点击链接后，浏览器跳转到指定页面；或者按一下空格键，页面向下滚动一段距离

​ 关于取消默认行为的属性包括preventDefault()和returnValue

使用
1、在DOM0级事件处理程序中取消默认行为，使用returnValue、preventDefault()和return false都有效
2、在DOM2级事件处理程序中取消默认行为，使用return false无效
3、在IE事件处理程序中取消默认行为，使用preventDefault()无效
点击下列锚点时，会自动打开小猿圈首页

<a href="" target="_blank">小猿圈</a>

preventDefault()

​ preventDefault()方法取消浏览器对当前事件的默认行为，无返回值
注意：IE8浏览器不支持 
<a href="">链接</a>
<script>
    var test = ('test');
    test.onclick= function(e){
        e = e || event;
        ();
    }
</script>

returnValue

​ returnValue属性可读写，默认值是true，但将其设置为false就可以取消事件的默认行为，与preventDefault()方法的作用相同

注意： firebox和IE9浏览器不支持 
<a href="">链接</a>
<script>
    var test = ('test');
    test.onclick= function(e){
        e = e || event;
        e.returnValue = false;
    }
</script>

兼容

var handler = function(e){
    e = e || event;
    if(){
        ();
    }else{
        e.returnValue = false;
    }
}

return false

​ 除了以上方法外，取消默认事件还可以使用return false

<a href="">链接</a>
<script>
    var test = ('test');
    test.onclick= function(e){
        return false;
    }
</script>

事件对象属性

​ 在鼠标事件对象提供了丰富的信息

坐标位置

​ 关于坐标位置，事件对象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y这6对信息

clientX/Y与x/y

clientX/Y表示当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置和y轴的位置；x/y与clientX/Y相同

<body>
    <div style="width: 200px;height: 200px;background-color: red;"></div>
    <script type="text/javascript">
        var box = ('box');
        box.onmousemove = function(e){
            e = e || event;
            // 鼠标指针相对于浏览器的水平和垂直坐标
            this.innerHTML = `clientX:${};clientY:${};clientY:${};clientY:${};`;
           
        }
    </script>
</body>

screenX/Y

​ 当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置和y轴的距离；

<body>
    <div style="width: 200px;height: 200px;background-color: red;"></div>
    <script type="text/javascript">
        var box = ('box');
        box.onmousemove = function(e){
            e = e || event;
            // 鼠标指针在可视区域中的水平和垂直坐标
            this.innerHTML = `screenX:${},screenY:${}`;
        }
    </script>
</body>

pageX/Y

pageX/Y表示相对于页面的水平和垂直坐标，它与clientX/clientY的区别是随滚动条的位置变化

<body style="height: 2000px;">
    <div style="width: 200px;height: 200px;background-color: red;"></div>
    <div></div>
    <script type="text/javascript">
        var box = ('box');
        var result = ('result');

        box.onmousemove = function(e){
            e = e || event;
            result.innerHTML = `clientX:${};clientY:${}<br>pageX:${},pageY:${}`;
        }
    </script>
</body>

offsetX与offsetY

​ 当鼠标事件发生时，鼠标相对于事件源x轴的位置 offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

<body style="height: 2000px;">
    <div style="width: 200px;height: 200px;background-color: red;">
    </div>
    <div></div>
    <script type="text/javascript">
        var box = ('box');
        var result = ('result');
        box.onmousemove = function(e){
            e = e || event;
            this.innerHTML = `clientX:${};clientY:${};offsetX:${};offsetY:${};`;
        }
    </script>
</body>
作者：前端开发小马哥
链接： juejin.im/post/68892174
来源：掘金
weixin_39915820
关注
DOM事件对象
沉梦昂志
07-12 203
绑定事件的两种方式/DOM事件的级别 我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。 DOM0的写法：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getE
JavaScript中的事件处理程序（addEventListener）
01-08
总结来说，`addEventListener`是JavaScript中处理事件的关键工具，它提供了强大的灵活性和控制力，使得开发者能够优雅地响应用户行为和系统变化。理解并熟练运用`addEventListener`是成为一名优秀的前端开发人员的...
JS事件流，事件冒泡，事件捕获，事件处理程序，事件对象
qq_34850703的博客
10-24 646
事件流 JavaScript操作css称为脚本化CSS,而JavaScript与HTML的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。 历史 当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆 　　两家公司的浏览器开发团队在看待浏览器事件方面还是一致的
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3757
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
事件冒泡及阻止事件冒泡 事件的触发 事件参数对象 获取用户按下键盘的键
Leon_Jinhai_Sun的博客
01-20 778
事件冒泡及阻止事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dv1 { width: 400px; h...
js事件的对象属性和方法。事件冒泡，捕获及委托。
domunweb的博客
12-14 655
一、事件的Event对象和属性 首先来看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>event_bubble</title> </head>
addEventListener 的三个参数
weixin_33895657的博客
03-16 703
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript 事件流、事件处理程序及事件对象总结
10-20
在事件处理函数中，JavaScript会传递一个事件对象（event），它包含了有关事件的详细信息，如事件类型、事件目标等。事件对象的使用让我们能够访问事件的属性，执行一些基于事件的操作。例如，可以使用event....
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
JavaScript 事件机制是Web开发中不可或缺的一部分，它允许开发者响应用户操作或页面状态的变化。本文将深入探讨事件绑定、事件冒泡、事件捕获以及事件执行顺序这四个关键概念。 首先，事件绑定是将事件处理器（事件...
JavaScript常见事件对象与操作实例总结
10-17
在这篇“JavaScript常见事件对象与操作实例总结”的文章中，主要围绕JavaScript中的事件对象进行了详细介绍，特别是如何在不同的浏览器环境下操作这些对象。下面将围绕文章内容展开详细介绍几个关键知识点。 ### ...
javascript中this做事件参数相关问题解答
10-27
总结以上内容，`this`关键字在JavaScript事件处理程序中扮演了重要角色，它指向触发事件的DOM元素。正确理解和使用`this`对于编写可维护的代码至关重要，尤其是在涉及事件监听器时。务必注意`this`在不同上下文下的...
详解addEventListener的三个参数之useCapture
01-21
addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 “click”）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。 代码如下:       请在此点击鼠标。   代码如下: var outDiv = document.getElementById(“outDiv”); var middleDiv = document.g
常见事件对象的属性:返回触发对象及类型 阻止冒泡 阻止连接跳转 事件委托
weixin_50400752的博客
09-10 522
事件对象的一些属性 e.target和this的区别 检测方法 <body> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> var ul=document.querySelector('ul'); var lis=document.querySelec
addEventListener 的事件函数的传递【转载】
weixin_33730836的博客
11-13 227
addEventListener 参数如下： addEventListener(type, listener[, useCapture]); type，事件名称 listener，事件处理器 useCapture，是否捕获 一直把 listener 记成是响应函数，function 类型。相信很多人也是这么理解的。多数时候是这么使用 e...
addeventlistener事件参数_【JavaScript 教程】事件——表单事件
weixin_39707168的博客
11-21 976
作者 | 阮一峰1、表单事件的种类1.1、input 事件input事件当、、的值发生变化时触发。对于复选框()或单选框()，用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。input事件对象继承了InputEve...
addEventListerer的第三个参数是什么
dtbk123的博客
06-28 811
第三个参数可以是布尔值，也可以是对象，默认是布尔值false，即事件冒泡，还可以是true，即事件捕获，对象有三个属性，一个是capture，是否使用事件冒泡，默认是false，once是是否只触发一次，默认是false，passive是决定是否调用preventDefault事件，默认是false，如果设置为true则永远不会调用，即使函数里面写了。 ...
js事件绑定，通过addEventListener传递参数
kaka22pato的博客
09-20 3486
如果要为事件处理函数送参数的话，需要在匿名函数（事件函数）外包裹一个匿名函数, 并立即执行。
JS addEventListener参数解析
科研学习笔记！
01-23 2955
前言：   写的目的主要是细化到具体的参数   1.addEventListener(type,listener.useCapture)     type              字符串，事件名称，如'click'等 不需要'on'前缀listener         事件处理的函数，实现EventListener接口useCapture   是否使用捕
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 6087
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
JavaScript DOM事件对象详解与实例总结
总结来说，掌握JavaScript事件对象的使用是Web开发中的核心技能之一，理解其内部机制以及如何根据需要操作和利用这些对象，能够帮助开发者编写出更高效、更健壮的代码。通过阅读本文实例，读者可以加深对DOM事件、IE...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值