JavaScript重新学习、捡漏 （9）

JavaScript重新学习、捡漏 （9）

JavaScript的事件绑定

常用事件列表

事件列表	事件实现效果	方式
onclick	元素的点击事件	element.onclick = function(){}
ondblclick	元素的双击事件	element.οndblclick= function(){}
onfocus	表单获取焦点事件	element.οnfοcus= function(){}
onblur	表单失去焦点事件	element.οnblur= function(){}
onmouseover	鼠标在元素上方	element.οnmοuseοver= function(){}
onmouseout	鼠标离开元素	element.οnmοuseοut= function(){}
onsubmit	确认按钮被点击	element.οnsubmit= function(){}

事件绑定需要明确三点：事件源、事件绑定过程、事件处理结果
事 件 源 ：绑定事件的元素
事件处理过程：事件处理函数
事件处理结果：事件的返回值

事件绑定的三种方式：

①直接绑定：

<button onclick="tap()"></button>
<script>	
	function tap(){
		console.log("点击了按钮");
	}
</script>

②用对象进行绑定

<button id="btn"></button>
<script>	
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		console.log("点击了按钮");
	}
</script>

③
用事件监听的方式

<button id="btn"></button>
<script> 
	 var btn = document.getElementById("btn");
	 btn.addEventListener('click',function(){
		console.log("点击了按钮");
	 })
</script>

关于自定义属性

getAttribute(“attr”)	获取attr属性值
element.dataset.attr	获取attr属性值
element.dataset[‘attr’]	获取attr属性值
setAttribute(‘attr’,‘attrValue’)	设置属性值

注：通过dataset获取方方式必须是以data-开头的属性，attr只需要是data-后的值，并且浏览器必须是IE11；而getAttribute("attr")的方式中的attr必须是完整的属性名，并且是我们最常用的

Tip：

①事件处理函数里边的this代表當前元素对象