脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 定义事件

javascript中为某个元素指定事件的三种方式

 更新时间：2014年08月07日 14:47:41   投稿：whsnow  
在javascript中，可以为某个元素指定事件，指定的方式有以下三种使用onclick属性，使用addEvenListener()方法

在javascript中，可以为某个元素指定事件，指定的方式有以下三种：
1、在html中，使用onclick属性
2、在javascript中，使用onclick属性
3、在javascipt中，使用addEvenListener()方法

三种方法的比较
（1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。
（2）首选第二、三种，第一种不利于将内容与事件分离，也不能使用event对象的相关内容。

一些语法细节
（1）在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。
（2）在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。
（3）第一种方法需要括号，第二、三种不需要。

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

完整代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Even Deom</title> 

</head> 
<body> 
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button> 
<button id="jsOnClick">jsOnClick</button> 
<button id="addEventListener">addEventListener</button> 

<script defer> 
function clickHandler() { 
alert("onclick attribute in html"); 
} 
function clickHandler2(e) { 
alert(e.target.innerHTML); 
} 
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", 
clickHandler2); 
</script> 
</body> 
</html>

在javascript中，可以为某个元素指定事件，指定的方式有以下三种：
1、在html中，使用onclick属性

2、在javascript中，使用onclick属性
（1）注意函数名没有双引号。

3、在javascipt中，使用addEvenListener()方法

三种方法的比较
（1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。

一些语法细节
（1）在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。
（2）在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。
（3）第一种方法需要括号，第二、三种不需要。

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>

</head>
<body>
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
<button id="jsOnClick">jsOnClick</button>
<button id="addEventListener">addEventListener</button>

<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert(e.target.innerHTML);
}
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>

相关文章

  • 全面解析Bootstrap表单样式的使用

    全面解析Bootstrap表单样式的使用

    这篇文章主要介绍了bootstrap表单样式的使用，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-09-09
  • ES6 Array常用扩展的应用实例分析

    ES6 Array常用扩展的应用实例分析

    这篇文章主要介绍了ES6 Array常用扩展的应用,结合实例形式分析各种常见扩展方法针对Array数组的转换、遍历、查找、运算等相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • js如何实现淡入淡出效果

    js如何实现淡入淡出效果

    这篇文章主要介绍了原生js如何实现淡入淡出效果，文章为大家提供了一个已经封装好的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 使用uniapp实现发布朋友圈功能

    使用uniapp实现发布朋友圈功能

    这篇文章主要介绍了使用uniapp实现发布朋友圈功能,在文章底部给大家介绍了uniapp 微信小程序分享、分享朋友圈功能，通过页内自定义分享按钮，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-09-09
  • 在JS中判断两个对象是否相等方法详解

    在JS中判断两个对象是否相等方法详解

    在JavaScript中，判断两个对象是否相等有多种方法，取决于你对相等的定义以及对象属性的类型，本文将介绍几种常见的方法，感兴趣的同学可以参考阅读
    2023-05-05
  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    这篇文章主要实现了无需Flash无需依赖任何JS库实现文本复制与剪切，是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，叫clipboard.js，感兴趣的小伙伴们可以参考一下
    2015-10-10
  • JQuery 前台切换网站的样式实现

    JQuery 前台切换网站的样式实现

    本文说的是在WordPress中怎样利用JQuery在网站的前台切换样式的方法。或者这篇文章的方法大家可能不是太需要，因为我觉得这是解决我被主题样式折腾到差不多分裂的原因及结果的最后手段。
    2009-06-06
  • JavaScript 双位非运算(~~ 操作符)使用场景实例探索

    JavaScript 双位非运算(~~ 操作符)使用场景实例探索

    本文为大家介绍JavaScript中双位非运算 ~~， ~~ 操作符是一个强大且经常被忽视的特性，它提供了一种快速、简洁的方式来处理数字和执行类型转换，通常可以被用于数学计算和类型转换，我们先了解一下 ~~ 的基本概念和它的一些应用场景
    2024-01-01
  • JavaScript阻止浏览器返回按钮的方法

    JavaScript阻止浏览器返回按钮的方法

    这篇文章主要介绍了JavaScript阻止浏览器返回按钮的方法,可实现通过javascript禁用掉返回按钮的功能,需要的朋友可以参考下
    2015-03-03
  • JS类的定义与使用方法深入探索

    JS类的定义与使用方法深入探索

    这篇文章主要介绍了JS类的定义与使用方法,结合实例形式深入分析了javascript类的定义与属性、方法的调用技巧,需要的朋友可以参考下
    2016-11-11

最新评论