`

js事件触发的三种写法

    博客分类:
  • js
 
阅读更多
1.
HTML代码
<input name="btn" type="button" id="btn" value="按钮" onclick="alert('mzwu.com');" />
 


2.作为JavaScript属性的事件处理程序

HTML代码
<input name="btn" type="button" id="btn" value="按钮"  />
<script language="javascript">
document.getElementById("btn").onclick = function(){alert("mzwu.com");}
</script>


说明:可能受第一种方法的误导,你会觉得应该写成:document.getElementById("btn").onclick() = "alert('mzwu.com');",这样写是错误的!其实第一种方法隐式的创建了一个函数,使用下边代码可以说明这一点,因为它检测出HTML属性值其实是一个函数:

HTML代码
<input name="btn" type="button" id="btn" value="按钮" onclick="alert(typeof(this.onclick));" />
 

上边是用直接量来创建函数,改成用function()语句的写法:


HTML代码
<input name="btn" type="button" id="btn" value="按钮"  />
<script language="javascript">
function e()
{
alert("mzwu.com");
}
document.getElementById("btn").onclick = e;
</script>
 

由此我们可引申出第三种方法。3.第三种方法

Webjx.Com

HTML代码
<input name="btn" type="button" id="btn" value="按钮"  />
<script language="javascript">
function document.all.btn.onclick()
{
alert("mzwu.com");
}
</script>
 

说明:诸如此类的方法还有function document.onclick(){},但这种方法在IE、FF中测试只有IE下可行,再改成function document.getElementById("btn").onclick(){}在IE、FF下都不行了,提示缺少标识符,其实这也不难解释,因为JavaScript标识符中本来就不允许出现点号,用document.getElementById("btn").onclick做标识符显然是错误的,但document.all.btn.onclick却又可以实在有点让人费解。
分享到:
评论

相关推荐

    JQuery调用绑定click事件的3种写法

    本文将详细介绍在jQuery中绑定`click`事件的三种常见方法,以及它们的应用场景和差异。 ### 1. `click()`方法 这是最直接和最简单的绑定`click`事件的方式。当你希望为一个元素添加点击事件监听器时,可以使用`...

    事件高级用法及兼容写法

    事件委托是一种优化技巧,它利用了事件冒泡机制的特点,将事件处理函数绑定到父元素上,而不是直接绑定到每个子元素上。 ```javascript var o = document.querySelector('div'); // 动态添加按钮 document....

    javascript层的属性事件写法

    JavaScript层的属性事件写法是前端开发中常见且基础的操作,它涉及到网页动态交互的核心。在JavaScript中,我们可以对HTML元素进行操作,设置其属性,响应用户触发的事件,从而实现丰富的用户界面。 首先,我们要...

    JavaScript中点击事件的写法

    本篇文章将深入探讨JavaScript中三种常见的点击事件写法,以及如何通过JavaScript模拟触发按钮点击事件。 ### 1. 内联事件处理 这是最基础的事件处理方式,直接在HTML元素中通过`onclick`属性指定一个函数或语句块...

    事件集合js事件集合js事件集合

    在现代JavaScript中,还可以使用箭头函数简化事件处理函数的写法: ```javascript document.querySelector('button').addEventListener('click', () =&gt; alert('Button clicked!')); ``` 事件不仅可以有事件监听器...

    javascript 处理事件绑定的一些兼容写法

    本文将详细讲解JavaScript处理事件绑定的一些兼容性写法,适用于不同的浏览器环境。 首先,让我们看一个基本的事件绑定函数的实现。这个函数`addEvent`接受三个参数:目标对象`obj`,事件类型`type`,以及事件处理...

    IE、FF的JS兼容写法

    在JavaScript编程中,IE(Internet Explorer)和FF(Firefox)是两种主要的浏览器,它们对JS(JavaScript)的实现存在一些差异,导致某些代码在其中一个浏览器中可能无法正常工作。这篇博客文章“IE、FF的JS兼容写法...

    JS 规范 插件 写法

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它在浏览器端运行,为用户提供动态交互体验。在大型项目中,遵循一定的规范和利用插件是提高代码质量和开发效率的关键。"JS规范"指的是编写JavaScript代码...

    JavaScript函数节流的两种写法

    JavaScript函数节流是一种控制函数在一定时间间隔内仅被触发一次的技术,旨在优化前端性能,尤其在处理高频事件(如窗口resize、滚动、连续的鼠标移动等)时防止过多的函数调用。函数节流的核心思想是确保函数不会在...

    10-JS事件基础.pptx

    在这个"10-JS事件基础"的教程中,我们将深入理解JavaScript中的事件处理机制,包括事件对象、事件冒泡、DOM事件流以及鼠标和键盘事件。 首先,让我们了解一下什么是事件对象。在JavaScript中,每当发生一个事件(如...

    js插件的写法.编写javascript插件

    JavaScript 插件是一种可复用的代码模块,它扩展了JavaScript的功能,使开发者能够便捷地在项目中添加特定功能。创建一个JavaScript插件通常涉及以下几个关键步骤和知识点: 1. **封装**: 封装是JavaScript插件的...

    JavaScript 三种不同位置代码的写法

    第三种写法涉及到将JavaScript代码完全从HTML标记中分离出来,通过操作DOM来绑定事件处理器。示例如下: ```html 按钮3" id="btn3"&gt; ``` ```javascript var obj = document.getElementById("btn3"); if(window....

    javaScript实现级联效果的两种写法

    2. JavaScript代码:在每个`&lt;select&gt;`元素上添加`onchange`事件监听器,当用户选择一个省份时,触发函数`showCities`来动态填充城市列表,同理,选择城市后填充区县列表。 ```javascript function showCities...

    js事件绑定机制1

    在提供的内容中,展示了三种不同的事件绑定方式,分别使用jQuery库的不同方法来实现。这里我们将详细探讨这些方法以及它们背后的事件绑定机制。 1. **jQuery的`.onclick()`方法** 这种方式是jQuery对原生...

    通用JS事件写法实现代码

    本文将通过一段示例代码来详细解析一种通用的JS事件处理方式,并探讨其在不同浏览器环境下的兼容性问题。 #### 二、示例代码分析 ##### 2.1 HTML结构 ```html &lt;title&gt;test &lt;script language="javascript" type...

    Vue.js 事件修饰符的使用教程

    除了上面提到的两种修饰符,Vue.js还提供了其他事件修饰符: 3. `.capture`修饰符:此修饰符用于在事件捕获阶段调用事件处理函数,而不是在冒泡阶段。这与JavaScript原生事件处理不同,Vue.js默认使用冒泡阶段。...

    layui动态绑定事件的方法

    在实际操作中,我们可以通过编写一段JavaScript代码来实现动态绑定事件。先通过jQuery选取需要添加事件监听的元素,然后使用.on()方法绑定事件。对于动态添加的元素,我们同样可以使用.on()方法进行事件委托,将事件...

    jquery点击弹窗2种写法

    这两种方法都基于jQuery的事件处理和DOM操作功能,下面将详细介绍这两种实现方式。 ### 1. 使用jQuery UI Modal Dialog jQuery UI库提供了一种简单易用的模态对话框功能。首先,你需要在项目中引入jQuery和jQuery ...

Global site tag (gtag.js) - Google Analytics