监控事件以及this和target的区别

addEventListener() 方法

语法

element.addEventListener(event, function, useCapture)

参数值

//获取当前target

functiongetTarget() {

    //当前事件

     var event = window.event||arguments[0];

    //target 就是这个对象

    var target = event.srcElement||event.target;

    console.log(event);

    console.log(target);

    console.log(target.tagName);//标签名称

    console.log(target.nodeName);////该标签的节点名称

    console.log(target.classList);//该标签的类集合

    console.log(target.className);//该标签的class名称

    console.log(target.innerHTML);//这个标签的内部dom结构

    console.log(target.innerText);//这个标签的内部文本信息

    console.log(target.outerHTML);//这个标签本身的dom结构

    console.log(target.getAttribute("属性名"));//获取这个标签的某个值

    console.log(target.setAttribute("属性名","属性值"));//获取这个标签的某个值

    console.log($(target).val());//这个对象的值，针对input textarea等控件有用（有值）

    console.log(target.value);//这个对象的值，针对input textarea等控件有用（有值）

}

//js的原生监控事件 支持ie7以上浏览器

document.getElementById("test1").addEventListener("click",function(event){

    event = event || window.event;

     var target = event.srcElement||event.target;

     console.log(this.value);

     console.log(target.value);

     console.log("********");

     console.log(this.tagName);

});

$("#test1").on("click",function (event) {

   event = event || window.event;

    var target = event.srcElement||event.target;

    console.log(this.value);

    console.log(target.value);

    console.log("********");

    console.log(this.tagName);

})

$("#test1").click(function (event) {

    event = event || window.event;

    var target = event.srcElement||event.target;

    console.log(this.value);

    console.log(target.value);

    console.log("********");

    console.log(this.tagName);

})

这里面一般用的是冒泡触发

这里面都有个this，在这里面相当于event获得的target.（因为这里用了id限定了唯一，如果是class或者标签 等 不能确定唯一 ，this相当于捕获触发的事件带来的target）

来自印象笔记 2018-12-28