JavaScript:关于事件处理程序何时可以直接访问元素的属性

指定在元素的的事件处理程序中指定

<input type="button" value="click me" onclick="alert(this.value)"/>

这段代码可以正确工作,点击之后会弹出 click me字符串;

如果把该代码改为:

<script>

function clickMe(){

alert(value);

}

</script>

<input type="button" value="click Me" onclick="clickMe()"/>

没有任何反应。

如果再修改为在JavaScript代码中动态指定事件处理函数,如下:

<input type="button" value="click Me" id="myBtn"/>

<script>

function clickMe(){

alert(this.value);

}

var btn = document.getElementById("myBtn");

btn.onclick=clickMe;

</script>

那么点击按钮之后,弹出的就是click Me,也就是此时this有效。

原因在于,在html代码中直接指定的事件响应代码,浏览器会动态创建一个封装着元素属性的函数,函数内部还有一个局部变量event,然后再调用在onclick属性中指定的那段js代码。

如果要模拟一下,则类似于如下的代码:

假设有如下元素:

<input type="button" id="myMock" value="mock" onclick="clickMe1()" />

那么当点击该按钮的时候,浏览器会创建如下这么一个函数来执行在onclick属性中指定的JavaScript代码。

<script>

function mock() {

with (document) {

var item = getElementById("myMock");

with (item) {

clickMe1();

}

}

}

</script>

因为clickMe1不是mock的内部函数,他只是在mock中被调用,所以clickMe1内部直接访问value是无效的。

而如果我们在onclick中指定的不是一个执行函数的代码,而是直接把该函数的代码放在这里,也就是:

<input type="button" value="mock" id="myMock" onclick="alert(value)" />

那么响应的mock函数就会变为

<script>

function mock() {

with (document) {

var item = getElementById("myMock");

with (item) {

alert(value);

}

}

}

</script>

此时当然可以正确获取到item的value的值。

来自为知笔记(Wiz)

时间: 2024-09-30 03:29:31

JavaScript:关于事件处理程序何时可以直接访问元素的属性的相关文章

JavaScript之事件处理程序

一.原生JavaScript事件处理程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="EvenUtil.js" charset="UTF-8"></script> <script src="demo1.js" charset

[转]javascript指定事件处理程序包括三种方式:

javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn"); //取得该按钮的引用 btn.onclick=function(){ alert('clicked'); alert(this.id); // mybtn 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理. 删除DOM0级方法指定的事件处理程序: btn.onclick=null; // 删除事件

js事件流、事件处理程序/事件侦听器

1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,为截获事件提供了机会.然后是实际的目标接收到

js学习笔记:事件——事件流、事件处理程序、事件对象

Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 事件流 事件流描述的是从页面中接受事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡,即事件开始是由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 如果点击了页面中的一个div元素,那么这个click事件可能会按照如下顺序传播: < div> < body> < html> docume

JavaScript - 事件处理程序

即响应某个事件的函数. 1. HTML事件处理程序 <input type="button" value="Click Me" onclick="alert('Clicked')" /> 或者 <input type="button" value="Click Me" onclick="showMessage()" /> onclick的处理程序中可以通过even

跨浏览器的事件处理程序——事件处理程序、事件对象差异

为了以跨浏览器的方式处理事件,不少开发人员会使用能够隔离浏览器差异的javascript库,本文从事件处理程序.事件对象差异出发,演示开发最适合的事件处理方法 基本名词解析: 事件 用户或浏览器自身执行的某种动作 事件流 从页面中接收事件的顺序,,IE的事件流指的是事件冒泡流,而Netscape Communicator的事件流是事件捕获流 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档) 事件捕获 不太具体的节点应该更早接收到事

深入理解DOM事件机制系列第二篇——事件处理程序

× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序和IE事件处理程序四类,下面将详细介绍该部分内容 HTML事件处理程序 某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定.这个特性的值应该是能够执行的JavaScript代码 在事件处理程序函数内部,this

JavaScript系列----事件机制

1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件流. <!DOCTYPE HTML> <html> <body> <div> <button>click</button> </div> </body> </html> 在上面的代码中,如果点击按钮bu

深入理解js Dom事件机制(二)——添加事件处理程序

深入理解js Dom事件机制(一)--事件流 事件就是当用户或者浏览器自身执行的某种动作,诸如 click.mouseover等都是事件的名称,那响应个事件的函数就称为事件处理程序(事件处理函数.事件句柄). 事件处理程序的名字都是以on+事件名称命名,比如 click事件的事件处理程序就是onclick, 为某个事件指定事件处理程序的方式大致分为三种. 1.HTML事件处理程序 这个很简单,大家基本初学js的时候都应该用过,就不再赘述,直接看实例代码 <!DOCTYPE html> <