版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82079322
js
1、标签(不推荐,要将script放在页面最后且不能onload)
<body>
<button onclick="clickEvent()">click</button>
</body>
<script>
function clickEvent() {
alert('hello world!');
}
</script>
2、函数赋值
<body>
<button id="btn">click</button>
</body>
<script>
window.onload=function(){
var btn=document.getElementById('btn');
// btn.onclick = function(){
// clickEvent()
// };
// function clickEvent() {
// alert('hello world');
// }
btn.onclick=function(){
alert('hello world');
};
}
</script>
3、事件监听( 传入的是函数 不是函数值 )
<body>
<button id="btn">click</button>
</body>
<script>
window.onload=function(){
var btn=document.getElementById('btn');
btn.addEventListener('click',function(){
alert('hello world!');
})
}
</script>
移除addEventListener添加的事件:
ele.removeEventListener('click',myFunction);
addEventListener方法特点:
1、同一事件多个句柄(不会覆盖已存在事件)
ele.addEventListener("click", myFunction);
ele.addEventListener("click", mySecondFunction);
2、不同事件句柄(给同一元素添加不同事件和函数)
ele.addEventListener("click", myFunction);
ele.addEventListener("mouseout", mySecondFunction);
jq
$(function () {
var btn=$('button');
//1.eventName(fn)
btn.eq(0).click(function () {
alert('1');
});
//2.on('eventName',fn)
btn.eq(1).on('click',function () {
alert('2')
},true)//true:代表捕获(由外向里) ;false(默认值):代表冒泡(由里向外);
});
事件冒泡捕获
冒泡:事件由里向外扩散传递
<body>
<script>
window.onload = function () {
document.getElementById("father").addEventListener("click",function(){
alert('1');
});
document.getElementById("son").addEventListener("click",function(){
alert('2');
})
}
</script>
<div id="father">
<button id="son">click</button>//先2后1
</div>
</body>
捕获:事件由外向里扩散传递
<body>
<script>
window.onload = function () {
document.getElementById("father").addEventListener("click",function(){
alert('1');
},true);
document.getElementById("son").addEventListener("click",function(){
alert('2');
},true);
}
</script>
<div id="father">
<button id="son">click</button>//先1后2
</div>
</body>
阻止事件冒泡
document.getElementById("father").addEventListener("click",function(){
alert('1');
});
document.getElementById("son").addEventListener("click",function(e){
//return false;//法一(需放前面,不推荐)
e.stopPropagation();//法二(推荐)
alert('2');
});
}
<div id="father">
<button id="son">click</button>//仅2
</div>
阻止默认事件
document.getElementById("tag").addEventListener("click",function(e){
e.preventDefault();
alert('3');
});
<a href="https://www.baidu.com" id="tag">baidu</a>//点击会弹窗显示3,但不会跳转到百度链接