js中事件绑定的三种方式

js中事件绑定的三种方式

1.行内绑定

<button onclick="bind1()">行内绑定</button>
<!--这么写也是同样的效果-->
<button onclick="alert('行内绑定')">行内绑定</button>
<script>
		
	//行内绑定
	function bind1(){
		alert('行内绑定');
	}
		
</script>

 

2.动态绑定

<button id="bind2">js动态绑定</button>
<script>

    //动态绑定
    document.getElementById('bind2').onclick = function(){
        alert('js动态绑定');
    }

</script>

 

3.事件监听

用 addEventListener()  来绑定事件监听函数。 这样做的好处是，同一个元素上添加多个相同事件不会被覆盖。

<button id="bind3">点我给p标签内容改变字体颜色</button>
<p id="demo">这是demo标签内容</p>
<script>

    //用 addEventListener()  来绑定事件监听函数。 
    document.getElementById('bind3').addEventListener('click',function(){
        document.getElementById('demo').style.color = 'red';
    })
    document.getElementById('bind3').addEventListener('click',function(){
        document.getElementById('demo').style.fontSize = '50px';
    })

    // addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

</script>