JS鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
鼠标点击事件是Web开发中使用最频繁的交互功能之一,其中又以JavaScript作为事件的绑定和处理工具最为常见。本文将介绍js鼠标点击事件在各个浏览器中的写法以及Event对象属性介绍。
鼠标点击事件写法介绍
基础事件绑定及处理函数
- 首先,我们需要了解在各个浏览器中的鼠标点击事件绑定函数,其中
addEventListener
是标准事件绑定函数,不同的浏览器可能有不同的函数。
// 添加鼠标点击事件监听,绑定函数为clickEvent
if(document.addEventListener) {
document.addEventListener('click', clickEvent);
} else if(document.attachEvent) {
document.attachEvent('onclick', clickEvent);
}
- 鼠标点击事件处理函数
事件处理函数是在相应事件发生时执行的函数。在鼠标点击事件中,事件处理函数会包含一个事件对象event,我们可以通过该对象获取鼠标点击位置、按键等信息。
function clickEvent(event) {
// 取消事件默认行为
event.preventDefault();
// 获取点击位置
var x = event.pageX;
var y = event.pageY;
// 获取按键状态
var leftClicked = event.button === 0;
var rightClicked = event.button === 2;
}
事件委托及冒泡
- 事件委托
事件委托是一种事件处理的优化技术,它可以将多个子元素的相同事件委托给它们的父元素处理,以减少事件处理函数的数量,并提高性能和维护性。
// 点击元素添加一个子元素,并触发点击事件
var parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
// 防止事件冒泡
event.stopPropagation();
if(event.target.className === 'btn-add') {
var child = document.createElement('div');
child.className = 'child';
parent.appendChild(child);
// 触发子元素的点击事件
child.click();
}
});
// 每个子元素绑定的点击事件
document.addEventListener('click', function(event) {
if(event.target.className === 'child') {
console.log('click on child');
}
});
- 事件冒泡
事件冒泡是指事件在触发元素后,会一层层向外冒泡传递到它的父元素,直至document对象为止。我们可以利用这一机制来进行事件委托。
// 添加多个元素并绑定点击事件
var elements = document.getElementsByTagName('div');
for(var i=0; i<elements.length; i++) {
elements[i].addEventListener('click', function(event) {
console.log('click on ' + this.id);
});
}
Event对象属性介绍
- button
button属性可以获取鼠标按键的状态,返回值为0、1或2,分别表示左键、中键和右键。
if(event.button === 0) {
console.log('left button clicked');
} else if(event.button === 1) {
console.log('middle button clicked');
} else if(event.button === 2) {
console.log('right button clicked');
}
- pageX, pageY
pageX和pageY属性可以获取鼠标点击位置的坐标,相对于文档的左上角。
var x = event.pageX;
var y = event.pageY;
- target
target属性可以获取事件的触发元素。
var targetElement = event.target;
- stopPropagation()
stopPropagation()方法可以取消事件的进一步传递,防止事件冒泡。
event.stopPropagation();
示例说明
下面是两个鼠标点击事件的实例:
实例1
在这个案例中,我们创建了一个按钮,当用户点击按钮时,文本会在网站的顶部添加一行显示该动作的内容。
<!DOCTYPE html>
<html>
<head>
<title>JS鼠标点击事件绑定实例</title>
<script>
function handleClick(event) {
var newLine = document.createElement('p');
newLine.innerHTML = 'Button is clicked.';
document.body.insertBefore(newLine, document.body.firstChild);
}
function init() {
var btn = document.getElementById('myButton');
btn.addEventListener('click', handleClick);
}
window.addEventListener('load', init);
</script>
</head>
<body>
<button id="myButton">点击我</button>
</body>
</html>
实例2
在这个案例中,我们将创建一个元素,其名为container,我们将在内部放置几个嵌套的元素,然后监听来自于用户的每一次点击事件。所有点击事件都会被处理返回,也就是我们会在控制台上看到点击的信息。
<!DOCTYPE html>
<html>
<head>
<title>JS鼠标点击事件委托实例</title>
<script>
function handleClick(event) {
var elem = event.target;
console.log(elem.tagName + ' was clicked!');
}
function init() {
var container = document.getElementById('container');
container.addEventListener('click', handleClick);
}
window.addEventListener('load', init);
</script>
</head>
<body>
<div id="container">
<div>
<button>点击</button>
</div>
<div>
<a href="#">链接</a>
</div>
</div>
</body>
</html>
总结
本文介绍了js鼠标点击事件在各个浏览器中的写法以及Event对象属性介绍。如果您掌握了这些知识并且在实践中熟练应用,将会大大提高您的网站开发效率并且改善用户的交互效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍 - Python技术站