js中事件处理与获取值的方法

1、js中事件的处理方式--两种

下面以onclick事件为例展示事件的两种处理方式：

方式1：

//html
<input type="button" value="onclick1" onclick="f1();"/>

//js
<script>
	//方式一：
	function f1(){
		console.log("点击事件-方式一");
	}
</script>

方式2： 

 

//html
<input type="button" id="id1" value="onclick2"/>

//js
<script>
    //方式二：
	window.onload=function(){
		var id1 = document.getElementById("id1");
		id1.onclick = function(){
			console.log("点击事件-方式二");
		}
	}
</script>

2、js中事件获取值得方法

此处主要展示的是通过this对象获得事件的值，下面以获得事件onfocus为例：

//html
    <input type="text" onfocus="f1(this);" value="value1"/>
		
    <input type="text" id="id2" value="value2"/>

//js
<script>
	//方式二：
	window.onload=function(){
		var tag = document.getElementById("id2");
		//获得焦点
		tag.onfocus = function(){
			console.log(this.value);//方式一，建议使用这种方式
            console.log(tag.value);//方式二，能用this，建议使用this
		}
	}
	
	//方式一：
	
	//获得焦点
	function f1(node){
		console.log(node.value);
	}
</script>

总结：

js中有很多事件，但是这些事件的处理方式基本上是一样的，有两种方式；

获得事件对象的值时，能用this对象，就用this对象。