DOM里的this 和event.srcElement区别

先来看一个例子:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
     <input id="Button1" type="button" value="button1" onclick="alert(event.srcElement.value)" />  
     <input id="Button2" type="button" value="button2" onclick="alert(this.value)" />    
</body>
</html>

结果:输出"button1"和"button2",两者都能获取事件的value

把this和event.srcElement都放在调用函数中

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
        function thistest() {
            alert(this.value);
        }
        function srctest() {
            alert(event.srcElement.value);
        }

    </script>
</head>
<body>
    <input type="button" value="button1" onclick="thistest()">
    <input type="button" value="button2" onclick="srctest()">
</body>
</html>

结果:this.text()输出"undefined" ,srctest()输出"button2",

结论:this是监听当前的事件的对象,而event.srcElement是引发事件的对象.

验证:采用冒泡事件

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>    
 <table id="table" onclick="alert(this.id)">
        <tr id="tr" onclick="alert(this.id)">
            <td id="td" onclick="alert(this.id)">猛点击我吧</td>
        </tr>
    </table>
</body>
</html>

依次显示"td","tr","table",证明this是获取当前事件的对象

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>    
 <table id="table" onclick="alert(event.srcElement.id)">
        <tr id="tr" onclick="alert(event.srcElement.id)">
            <td id="td" onclick="alert(event.srcElement.id)">猛点击我吧</td>
        </tr>
       </table>
</body>
</html>

全部显示"td",因为srcElement 是获得引发事件的对象

秒客网

DOM里的this 和event.srcElement区别

相关文章