JS事件01（事件基础、事件原理、事件的兼容、事件对象、Event事件）

事件基础

document.onclick=function(){
​
}
​
document.addEventListener("click",clickHandler);//事件侦听对象.侦听器("事件类型",事件回调函数)
function clickHandler(e){
​
} 
​
//可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
//HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});//用户重置窗口大小时
​
//element.addEventListener(event, function, useCapture);
//第一个参数是事件的类型 (如 "click" 或 "mousedown").
//第二个参数是事件触发后调用的函数。
//第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
​
//addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
​
//这个事件回调函数不能有返回值，不能传参，addEventListener在执行clickHandler时只给它传入了一个参数，及event事件对象
//如果需要传参使用匿名函数调用带参数的函数element.addEventListener("click", function(){ myFunction(p1, p2); });
​
// 创建一个事件对象
// 事件类型必须是一个字符串
// var evt=new Event("天王盖地虎");
// 通知，抛发
// document.dispatchEvent(evt);
​
// 事件的类型必须相同
// 事件侦听的对象和抛发的对象必须相同
// 将事件抛向侦听对象 就可以
// 先侦听后抛发
​
// 部分事件是系统默认事件，这些事件会由系统自动抛发
​
var obj={
    n:1,
    a:function(){
        obj1.d(this.n);
    },
    b:function(m){
        m+=2;
        obj1.c(m)
    }
}
​
var obj1={
    c:function(z){
        console.log(z);
    },
    d:function(n){
        // console.log(n);
        n++;
        obj.b(n);
    }
}
​
obj.a(); 
​
var obj={
    n:1,
    a:function(){
        document.addEventListener("chilema",this.b);
        var evt=new Event("elema");
        evt.n=this.n;
        document.dispatchEvent(evt);
    },
    b:function(e){
        console.log(e.s);
    }
}
​
var obj1={
    c:function(){
        document.addEventListener("elema",this.d);
    },
    d:function(e){
        console.log(e.n);
        var s=e.n;
        s++;
        var evt=new Event("chilema");
        evt.s=s;
        document.dispatchEvent(evt);
    }
} 
// obj1.c();
obj.a();

事件原理

<style>
    .div0
    {
        width:200px;
        height: 200px;
        
        position: relative;
        left:0;
        right: 0;
        margin: auto;
        border:1px solid #000000;
    }
    .div1
    {
        width: 130px;
        height: 130px;
        
        position: absolute;
        left:0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
    }
    .div2
    {
        width: 50px;
        height: 50px;
        
        position: absolute;
        left:0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
    }
    img{
        position: absolute;
        width: 130px;
        height: 130px;
    }
</style>
<div class="div0">
    <div class="div1">
    <div class="div2"></div>
    <!-- <img src="./img/a.jpeg"> -->
    </div>
</div>
var div0=document.querySelector(".div0");
var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
div0.onclick=function(e){
    e.cancelBubble=true;//IE兼容事件 取消冒泡
    console.log(e);
} 
// 事件对象.addEventListener(事件类型,事件回调函数,是否是捕获阶段);默认是false
// 事件对象  必须是EventTarget或者继承他所产生子类
console.dir(div0);
​
div0.addEventListener("click",div0ClickHandler);
div1.addEventListener("click",div1ClickHandler,true);
div2.addEventListener("click",div2ClickHandler);
​
//e.currentTarget--->事件侦听的对象---->this
// e.target--->e.srcElement--->e.toElement  事件点击的目标对象
​
// 事件委托
// 将子元素事件委托给父元素，这样就可以减少侦听的数量
​
// 事件原理
// 捕获                   目标              冒泡
// 外                   到达目标              内
// |                                          |
// 内                                        外
function div0ClickHandler(e){
    console.log(e);
    console.log("div0");
}
​
function div1ClickHandler(e){
    console.log("div1");
    e.stopPropagation();//停止冒泡
}
​
function div2ClickHandler(e){
    console.log("div2");
}

事件兼容

<style>
    div{
        width:100px;
        height:100px;
        
    }
</style>
<div></div>
var div=document.getElementsByTagName("div")[0];
// 事件类型，事件回调函数,(是否捕获时触发)
// div.addEventListener("click",clickHandler,{once:true})
​
/* function clickHandler(e){
    console.log(e);
    // 删除事件侦听(事件类型,删除事件侦听的回调函数)
    // this.removeEventListener("click",clickHandler)
    // this.removeEventListener("click",arguments.callee);
} */
// IE8不兼容
​
/* 
div.attachEvent("onclick",clickHandler);
​
function clickHandler(e){
    console.log(e);
    div.detachEvent("onclick",clickHandler);
} */
​
/*  function addEventListen(elem,type,callback){
    try{
        elem.addEventListener(type,callback)
    }catch(e){
        elem.attachEvent("on"+type,callback);
    }
}
​
function removeEventListen(elem,type,callback){
    try{
        elem.removeEventListener(type,callback)
    }catch(e){
        elem.detachEvent("on"+type,callback);
    }
} */
​
/*  div.onclick=function(){
​
} */
​
// 1、addEventListener
// 缺点：不支持IE8及以下，方法名太长
// 优点：支持捕获和冒泡阶段分开侦听
    //    支持事件抛发机制
    //  支持同一个事件做多个事件回调函数
    // 事件使用时可以将函数与内容完全分离
​
// 2、attachEvent
// 缺点：IE8以上不支持，没有捕获，不支持一次点击，未来被淘汰
// 优点：支持IE8以下，
//     并且可以使一个事件调用多个回调函数
//   事件使用时可以将函数与内容完全分离
​
// 3、onclick=fn
// 优点:全浏览器支持，不考虑兼容问题，
//      代码便捷
// 缺点：不支持事件抛发机制，只能使用系统默认事件
// 同一个元素同一个事件不支持多个回调函数
// 因为代码大量使用匿名函数，容易造成回调地狱，并且在开发中代码实际功能不能分离
​
/*   div.onclick=function(){
    console.log("a");
}
div.onclick=function(){
    console.log("b");
} */
/*  div.onclick=function(){
    console.log("a");
    div.onclick=null;//删除事件
} */
​
/* div.addEventListener("click",clickHandler1);
div.addEventListener("click",clickHandler2);
​
function clickHandler1(e){
    console.log("a")
    div.removeEventListener("click",clickHandler1);
}
​
function clickHandler2(e){
    console.log("b")
} */
​
/*  div.onclick=function(){
​
} */

事件对象

<style>
        div{
        width:100px;
        height:100px;
        
    }
</style>
<div></div>
​
    e.type  事件类型  click
    e.target e.srcElement   事件目标对象
    e.currentTarget  this   事件侦听对象
    e.cancalBubble   设置取消冒泡
​
var div=document.querySelector("div");
div.addEventListener("click",clickHandler);
​
function clickHandler(e){
    console.log(e);
}
​
var obj={
    init:function(){
        var n=3;
        var div=document.querySelector("div");
        div.a=n;
            div.addEventListener("click",obj.clickHandler);
    },
    clickHandler:function(){
        console.log(this.a);
    }
} 
​
function fn(a,b){
​
}
​
fn(3,4) 
​
function fn0(fn){
    fn();
}
​
function fn1(a,b){
​
}
​
fn0(fn1); 
​
document.addEventListener("nihao",nihaoHandler);
​
var evt=new Event("nihao");
evt.a=1;
document.dispatchEvent(evt);
​
function nihaoHandler(e){
    // console.log(e===evt);
    console.log(e);
}

Event事件

<!-- <input type="text" id="user">
<select multiple>
    <option>北京</option>
    <option>西安</option>
    <option>武汉</option>
    <option>天津</option>
    <option>青岛</option>
</select>
<img src="./img/10-.jpg" id="imgs"> -->
<script>
        // change只能针对表单触发
        // var user=document.querySelector("#user");
        // var user=document.querySelector("select");
        // user.addEventListener("change",changeHandler);
        // input  如果input.value值发生改变，并且失去焦距触发
        // input checkbox radio
        // select select.value是选中的值
        //      如果增加多选  multiple  
            //       select.selectedOptions  被选择多个元素   select.selectedOptions[i].textContent
            //      select.selectedIndex   选择下标
        
        function changeHandler(e){
            // console.log(user.value);
            // console.log(user.selectedOptions);
            // console.log(user.selectedIndex);
        } 
​
        // load 和error 用于图片的加载，Ajax通信以及JSON或者其他文件的加载等
    //    load是加载成功
    //    error 是加载错误
        // var img=new Image();//document.createElement("img");
        // img.addEventListener("load",loadHandler);
        // img.addEventListener("error",errorHandler);
        // img.src="./img/1-.jpg";
        // document.body.appendChild(img);
        // console.log(img.offsetWidth);
        // 任何内容没有放在页面中不能调用clientWidth,offsetWidth,scrollWidth这样的数据
​
        function loadHandler(e){
            console.log("aaa");
            console.log(img.width)
        }
​
        function errorHandler(e){
            console.log(e);
        }
        
        // load还可以用于window加载创建完成
        // 使用window，侦听load事件
        // 1、所有的DOM加载完成
        // 2、所有的图片已经加载完成
        window.addEventListener("load",loadHandler);
​
        function loadHandler(e){
            console.log(e);
            // var div1=document.getElementById("div1");
            //  console.log(div1);
            var imgs=document.getElementById("imgs");
            console.log(imgs.offsetWidth);
        } 
​
            window.onload=function(){
            var bn=document.getElementById("bn1");
            bn.onclick=function(){
​
            }
        } 
        
</script>
<!--   <div id="div1"></div>
<form action="http://www.163.com" method="GET">
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="submit">
    <input type="reset">
</form> -->
​
<script>
    // submit和reset只能针对form表单侦听，不能针对input
    // 提交和重置时收到事件
    /*  var form=document.querySelector("form");
    form.addEventListener("submit",submitHandler);
    form.addEventListener("reset",submitHandler);
​
    function submitHandler(e){
        // 阻止默认事件
        e.preventDefault();
        // e.returnValue=false  兼容写法
        console.log(e);
    } */
​
</script>
​
<!-- <script>
// resize  针对window和textArea的事件
window.addEventListener("resize",resizeHandler);
​
function resizeHandler(e){
    console.log(document.documentElement.clientWidth)
}
​
</script> -->
<!--  <input type="text">
<script>
    var input=document.querySelector("input");
    input.addEventListener("select",selectHandler);
    // input文本选择文字时触发
    function selectHandler(e){
        // console.log("aa");
        // console.log(input.selectionStart);
        // console.log(input.selectionEnd);
        input.value=input.value.slice(0,input.selectionStart)+input.value.slice(input.selectionEnd);
    }
</script> -->
<!-- <style>
    div{
        width:250px;
        height: 250px;
        overflow: scroll;
    }
</style> -->
<!-- <div>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br>
    asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br> asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br> asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br> asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br> asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br> asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br> asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br> asdlkjaslkdj<br>
    asdlkjaslkdj<br>asdlkjaslkdj<br>
</div> -->
<!-- <script>
    var div=document.querySelector("div");
    div.addEventListener("scroll",scrollHandler);
​
    function scrollHandler(e){
        console.log(div.scrollTop)
    }
</script> -->
​
<script>
    document.addEventListener("click",clickHandler);
    // PopStateEvent   popstate事件 历史记录被回退和前进时触发
    window.addEventListener("popstate",popstateHandler)
    function clickHandler(e){
        history.pushState({a:1},"","#1");
    }
​
    function popstateHandler(e){
        console.log(e);
    }
</script>