本文目录

JavaScript 事件基础

🌙
手机阅读
本文目录结构

事件基础

事件是什么:就是一件事,包括硬件的一些行为;

  • click
  • mouseover
  • mouseout
  • keydown
  • keyup

什么是绑定:事件监听;

具体某一个事件和事件整体的区别:一件事,和一套事件系统

什么是事件对象:实现事件系统,事件的机制,浏览器自己有一套机制;类似人的神经系统,这个内置第机制就是事件对象;

事件演示:

var oDiv=document.getElementById("div1");
oDiv.onmousemove=function(event){
    //直接把一个方法赋值给一个事件属性.这个方法运行的时候,浏览器会自动的给这个方法传一个对象;这个对象就是事件对象;
    event=event||window.event;//IE下的事件对象,是一个全局的event;这种的是兼容写法;
    event.clientX;//鼠标的X轴坐标;
    event.clientY;//鼠标的Y轴坐标;
    //时间有即时行;
    event.type;//事件类型;只和当时发生的类型有关;只能同时处理一个事件;
    this.innerHTML="X:"+event.clientX+" Y:"+event.clientY;
};
document.documentElement.onkeydown= function (event) {
    event=event||window.event;
    oDiv.innerHTML=event.keyCode;
}


//pageX;pageY;鼠标距离文档(当前页面的)最上角的距离;不支持IE678;
//clientX;clientY;指的是浏览器;
//onmouseover和onmouseenter区别;over会传播,enter是不传播的;
//onmouseout和onmouselive区别;

取消冒泡的方法;

     //阻止事件传播/冒泡的方法;
this.appendChild(ele);
ele.onmouseover=function(event){
    event=event||window.event;
    if(event.stopPropagation){
        event.stopPropagation();//标准留言器中禁止冒泡;
        // preventDefault中文意思是阻止默认行为;
    }else{
        e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
    }
}

onmouseenter的优势;

// onmouseover和onmouseenter很像,但是可以避免;onmouseover的一些问题;
// 如果是从父元素到子元素,不会触发onmouseover;
// 如果是从子元素到父元素,也不会触发onmouseover;

事件的冒泡和捕获

 function fn(){
    console.log(this.nodeName)
}
eles=document.documentElement.getElementsByTagName("*");
for(var i=0;i<eles.length;i++){
    //eles[i].addEventListener("click",fn,false);//SPAN、LI、UL、DIV、BODY
    eles[i].addEventListener("click",fn,true);//BODY、DIV、UL、LI、SPAN
}

冒泡和捕获是事件的两个阶段,我们可以在不同阶段来绑定(监听)处理方法; 如果用false是冒泡,如果是true是捕获; 一般都是用false来处理的

事件委托:

document.documentElement.onclick=function(event){
    event=event||window.event;
    //事件源委托给documentElement
    target=event.target||event.srcElement;//事件源
    console.log(target.nodeName)
}

下面是具体应用

document.documentElement.onclick=function(event){
    event=event||window.event;
    //事件源委托给documentElement
    target=event.target||event.srcElement;//事件源
    console.log(target.nodeName)
};
//下面是动态创建的
var p=document.createElement("p");
document.body.appendChild(p);
p.innerHTML="222312312312";
/*事件委托也可以实现动态绑定*/
/*所有的事件,都可以用事件委托来实现;时间委托是一个高级技巧*/

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了