<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<body>

  <form action="">

    <input type="text" name="username">

    <input type="button" id="btn" value="click me" this="32" event="sd">

  </form>

</body>

<script>

  document.getElementById('btn').onclick = function () {

    console.log(Array.prototype.slice.call(arguments)); // [MouseEvent] ie8及以下为空

    console.log(this);  // 该input对象

    console.log(event);  // 该点击事件

    console.log(this.form);  // input所在的表单对象

    console.log(this.form.username.value);  // 用户名input输入的值

  }

</script>

</html>

1、通过此方法绑定的事件，作用域是该元素对象；

2、多次绑定的事件，后面定义的覆盖之前的事件；

3、此方法绑定的事件在事件流中的冒泡过程中触发。

DOM0级事件绑定之js的onclick事件的更多相关文章

  1. js、jq事件绑定方式总结——以click事件为例

    一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...

  2. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  3. js 中onclick 事件 点击后指向自己的对象,查找或者添加属性 用关键字this 传入参数 (可以改变原标签css)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. thymeleaf 传参到js的onclick事件中

    html: <img th:onclick="'javascript:imgClick(\''+${card.id}+'\',\''+${card.name}+'\');'" ...

  5. js 增加 onclick 事件

    obj.onclick = function(){check(this)} function check(obj){ alert(obj)l }

  6. JS中onclick事件传参

    美术馆案例中,需要将“增加一个img标签,放入大图片”这样一个函数封装,但是在调用的时候需要传参. <script type="text/javascript"> on ...

  7. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  8. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  9. 关于js中对事件绑定与普通事件的理解

    普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id  ta ...

随机推荐

  1. 笔试算法题及解答（Python）

    1.给定任意一个正整数,求比这个数大且最小的“不重复数”,“不重复数”的含义是相邻两位不相同,例如1101是重复数,而1201是不重复数 # coding:utf-8 ''' Created on 2 ...

  2. zabbix监控nginx status页面

    在需要添加监控的nginx配置文件中添加下列配置 #zabbix监控nginx配置 location /nginx_status { stub_status on; access_log off; a ...

  3. 1.什么是微信小程序

    微信小程序,简称CX,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题. 应用将无处 ...

  4. cookieUtils.js

    cookieUtils.js export default { data () { return { } }, created () { }, methods: { arrayContain (arr ...

  5. 【leetcode】1006. Clumsy Factorial

    题目如下: Normally, the factorial of a positive integer n is the product of all positive integers less t ...

  6. Hibernaate 详解

    hibernate.cfg.xml 连接数据库: connection.username 数据库的名称.这是我自己的是luwei connection.password 数据库的密码 luwei co ...

  7. bzoj 2013

    http://www.lydsy.com/JudgeOnline/problem.php?id=2013 最初看这个题的时候,以为神题不可做,然后去找yzjc..然后做法过于简单了(' '       ...

  8. leetcode的一些贪心题目

    11-盛最多水的容器 思路:定义2个指针分别指向数组的两端,找出两边缘最小的那个,然后乘以两边缘的距离,然后向中间搜索,移动一次算出结果比较取最大的. class Solution { public: ...

  9. border-color:transparent;

    http://www.zhangxinxu.com/study/201111/triangle-css-border.html

  10. Java + selenium 启动谷歌浏览器

    在之前创建的test项目下建一个test包,然后在包下建一个Chrome.java类.写入如下代码 package test; import java.util.concurrent.TimeUnit ...