js最常用的click事件3种方法

1、onclick=name()

<!DOCTYPE html>

<html leng="en">

    <head>

        <meta charset="utf-8">

        <title>one</title>

    </head>

    <body>

        <div id="dome"></div>

        <button type="button" onclick="displayDate()">点击</button>

        <script>

            function displayDate(){

                document.getElementById("dome").innerHTML=Date();

            }

        </script>

    </body>

</html>

2、js中绑定

<!DOCTYPE html>

<html leng="en">

    <head>

        <meta charset="utf-8">

        <title>one</title>

    </head>

    <body>

        <div id="dome"></div>

        <button type="button">点击</button>

        <script>

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

            btn.onclick=function(){

                document.getElementById("dome").innerHTML=Date();

            }

        </script>

    </body>

</html>

3、事件柄方法

//addEventListener 用于向指定元素添加事件句柄
//可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件
<!DOCTYPE html>

<html leng="en">

    <head>

        <meta charset="utf-8">

        <title>one</title>

    </head>

    <body>

        <div id="dome"></div>

        <button type="button">点击</button>

        <script>

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

            btn.addEventListener('click',function(){

                document.getElementById("dome").innerHTML=Date();

            },false)

        </script>

    </body>

</html>

JS----click3种方法的更多相关文章

  1. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  2. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  3. iframe-父子-兄弟页面相互传值(jq和js两种方法)

    参考文章: http://blog.csdn.net/u013299635/article/details/78773207 http://www.cnblogs.com/xyicheng/archi ...

  4. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  5. url地址数据参数转化JSON对象（js三种方法实现）

    当我们用get方法提交表单时,在url上会显示出请求的参数组成的字符串,例如:http://localhost:3000/index.html?phone=12345678901&pwd=12 ...

  6. JS四种方法去除字符串最后的逗号

    <script> window.onload=function() { var obj = {name: "xxx", age: 30, sex: "fema ...

  7. JavaScript模板引擎artTemplate.js——两种方法实现性别的判定

    template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...

  8. js三种方法添加image

    1 var img = new Image(); 2 var img = document.createElement('image'); 3 img.innerHtml = '<img src ...

  9. JS 判断数据类型的三种方法

    说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...

  10. js数组去重的4种方法

    js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...

随机推荐

  1. Struts2学习：值栈（value stack）

    1.index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %& ...

  2. MySQL管理工具HeidiSQL

    MySQL管理工具HeidiSQL   HeidiSQL 是一个功能非常强大的 MySQL 客户端软件.它是德国程序员Ansgar Becker和几个Delphi程序员开发的一个开源工具.要通过Hei ...

  3. 剑指Offer(三)：从尾到头打印链表

    说明: 1.本系列是根据<剑指Offer>这个系列做的一个小笔记. 2.直接动力是因为师兄师姐找工作很难,而且机械出生的我面试算法更难. 3.刚开始准备刷LeetCode.LintCode ...

  4. Python下的opencv小问题大智慧

    1.今晚日了狗了,图像显示不按照预期出现,然后突然就好了...... 2.根据第一个问题举一个例子,另一个我没保存... 是不是分不清楚????   plt.imshow(wjy2, cmap='gr ...

  5. day6--递归函数

    一递归函数 我们老师经常喜欢讲的一句话就是:人理解函数,神理解递归,那么什么是递归函数? 递归函数:在一个函数里面调用函数本身,也就是说这个函数里面出现了和函数一样的名字 例如: def func(n ...

  6. [Unity插件]Lua行为树(二)：树结构

    参考链接:https://blog.csdn.net/u012740992/article/details/79366251 在行为树中,有四种最基本的节点,其继承结构如下: Action->T ...

  7. python中import和from-import的区别

    . import导入模块的路径两种方式 # 将模块所在路径再程序中添加到sys.path列表中 import sys sys.path import导入模块按照sys.path顺序依次查找,“”代表当 ...

  8. 不用MathType, 如何在Mac Word中插入公式

    不用MathType, 如何在Mac Word中插入公式 找了好久都找不到MathType的破解版,不得不使用免费清爽的MarkDown编辑工具Typora_for_Mac. 我是很喜欢Typora的 ...

  9. ROS进阶学习笔记（10）- 搭建自己的Turtlebot(5) - Interactive Makers

    用interactive_makers控制Turtlebot移动 interactive_makers 是Willow Garage公司开发的一个虚拟控制工具,可通过鼠标在虚拟环境中的操作,完成实际机 ...

  10. Spring MVC 学习笔记11 —— 后端返回json格式数据

    Spring MVC 学习笔记11 -- 后端返回json格式数据 我们常常听说json数据,首先,什么是json数据,总结起来,有以下几点: 1. JSON的全称是"JavaScript ...