JS事件处理的一点细节

最新推荐文章于 2023-09-29 22:24:58 发布

liliyayaer

最新推荐文章于 2023-09-29 22:24:58 发布

阅读量96

点赞数

分类专栏： WEB开发文章标签： JavaScript prototype ASP HTML ViewUI

本文链接：https://blog.csdn.net/samueli/article/details/83291580

版权

WEB开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在Javascript中我们可以利用下面的方式来给一个HTML元素添加事件：

var btn = document.getElementById("btn");
btn.οnclick=function(){alert('hello!');}

当然第二行代码我们还可以修改成这样的方式：

btn.οnclick=new Function("alert('hello!');"}

这种方式都会创建一个匿名的函数，如果我们把它应用于循环中，就像下面这样：

<HTML>
 <HEAD>
  <TITLE></TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	function test(){
		var btns = document.getElementsByTagName("input");
		var data = document.getElementById("data");
		for(var i = 0; i < btns.length; i++){
			btns[i].onclick = function(){data.innerText = "onclick: " + i;};
			btns[i].attachEvent("onmouseover", function(){data.innerText = "onmouseover: " + i;});
			btns[i].onmouseout = new Function("data.innerText = 'onmouseout: " + i + "';");
		}
	}
  //-->
  </SCRIPT>
 </HEAD>

 <BODY οnlοad="test()">
  <input type="button" name="btn1" value="Test1"/>
  <input type="button" name="btn2" value="Test2"/>

  <span id="data"></span>
 </BODY>
</HTML>

我们从输出结果中发现前两种方式的结果中都是2，深层原因很是疑惑，我觉得有两种解释：

1、所有创建的这种匿名函数都拥有一个引用，如果多次赋值可能会覆盖之前的事件处理属性的值；（但是button的引用是变化的啊？）；

2、前面的复制只是简单的字符串赋值，对于函数也如此，当真正触发事件调用时它才解析这段代码；（不过i的作用域是什么呢？）

问题依旧，继续学习，有懂得朋友帮忙指点一下！

参考资料：

http://www.happyshow.org/content.asp?id=92

http://shiningray.cn/functional_javascript_programming.html

下面的例子让我们理解JS中的对象机制和prototype的使用。来源于http://q.sohu.com/forum/5/topic/298749

function test(){
		var class1 = new Object();
		class1.hello = function(name){alert("hello, " + name);};
		class1.name = "lixw";

		class1.hello(class1.name);

		//prototype提供了扩展、改造原有对象的方法。
		//例如我们可以为已知对象，包括JavaScript的核心对象Array，Number，Math，Object，Boolean
               //等和自定义类添加方法或者属性。
		String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g,""); }
		alert("[" + " hello world  ".trim() + "]");

		Student.prototype.age = 22;
		var stu = new Student("lixw");
		alert(stu.age);
	}

	function Student(name){
		/**
		var o=new Obj();这样的语法，看起来似乎和Java/C++相当类似，但是他背后的执行过程是不同的。
		首先，解释器会new一个空的Object对象。然后将这个空的Object，作为隐藏的参数传递给function Obj()。
		在Obj函数中访问到的this，其实就是这个传入的空的Object 对象。
		这就是所谓：“this关键字关联于执行时的作用域”的含义。
		如果你想把一个函数作为“构造函数”，那么就不要在函数的最后加上return语句。
		因为如果没有return语句，new算符返回的就是那个被操作过以后的this。
		一旦你通过return返回了别的东西，这个this就被废弃掉了。对于函数的调用者来说，就会相当的困惑。
		*/

		this.name = name;
	}

看看下面的例子：

<HTML>
 <HEAD>
  <TITLE></TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	function Button() {
     
        this.button = document.createElement("button");
        this.button.appendChild(document.createTextNode("Press me!"));
		
        this.button.onclick = (
			function(v) { 
				return function() {
					var val = document.getElementById("val").value; alert(val);
				}
            }
		) (this.value);

		document.getElementById("d").appendChild(this.button);
	}
	function init(){
		var bt = new Button();
	}

  //-->
  </SCRIPT>
 </HEAD>

 <BODY οnlοad="init()">
  <input type="text" name="val"></input>
  <div id="d"></div>
 </BODY>
</HTML>

在这个例子中，下面的代码是关键：

this.button.onclick = (
	function(v) { 
		return function() {
			var val = document.getElementById("val").value; alert(val);
		}
        }
) (this.value);

我们需要注意变量的作用域。

JS中利用代码触发事件：

<HTML>
 <HEAD>
  <TITLE></TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  function rdl_doClick(e){  
	event.cancelBubble=false;  
	event.srcElement.value="我被单击了。"  
  }  
  </SCRIPT>   
 </HEAD>
 <BODY>

     <input id=oInput type=text tabindex=4 size=30 οnclick="rdl_doClick();">  
     <br><br>  
     <input type=button value="模拟单击" οnclick="document.all('oInput').click();">
     <br>

 </BODY>
</HTML>