（转）React事件处理函数必须使用bind(this)的原因

1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 : const test = { name:'jack', getName:function(){ console.log(this.name) }}test.getName()1234567使用node test.js执行上述代码可以正常输出jack. 之后,我们对代码进行调整: const te…

为什么React事件处理函数必须使用Function.bind()绑定this？

最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleC…

React事件处理函数传参问题

React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.…

react事件处理函数中绑定this的bind()函数

问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export default class App extends Component<Props> { constructor(props){ super(props) this.state={ times:0 } this.timePlus=this.timePlus.bind(this); } timePlus(…

React事件处理函数的bind复用和name复用

一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表单详解</title> </head> <body> <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js&q…

React为啥很多类里的标签上事件处理函数要用bind(this)

render() { return ( <div> <p onClick={this.clickHandler.bind(this)}>vz</p> </div> ) } clickHandler() { console.log(this.clickHandler); } 上面标签里若不使用bind的话,点击p标签会报错,因为clickHandler运行时this不指向类的实例,若要指向类的实例,就需要bind绑上. 其实有时候不用bind改变函数作用域也没…

React 事件处理函数

触摸事件:onTouchCancel\onTouchEnd\onTouchMove\onTouchStart (只会在移动设备上接受) 键盘事件:onKeyDown\onKeyPress\onKeyUp 剪切事件:onCopy\onCut\onPaste 表单事件:onChange\onInput\onSubmit 焦点事件:onFocus\onBlur UI元素:onScroll(移动设备是手指滚动和PC的鼠标滑动) 滚动事件:onWheel(鼠标滚轮) 鼠标类型:onClick\onCont…

React 学习(三) ---- state 和事件处理函数

在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1,还有在就是倒计时效果,这就用了组件内部的状态, 如果一个组件有内部状态,那只能用类式组件,因为类中拥有构造函数,构造函数表示就是一个对象实例上的属性,对象实例上的属性都是特有的,所以也可以称之为对象实例的状态. 在组件的构造函数中声明组件的状态也是很简单,直接写this.state = {},我们…

Jquery动态绑定事件处理函数 bind / on / delegate

1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元素上有体现. 如: $(document).ready(function(){ $("img").bind({ mouseenter:function(){ $(this).css("border","thick solid red"); }, mo…

React事件处理、收集表单数据、高阶函数

3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) a) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ----为了更好的兼容性 b) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ----为了高效 2. 通过event.target得到发生事件的DOM元素对象 ----不要过度使用ref */ // 创…

React事件处理和原生JS事件处理

1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发 ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElement.click()模拟触发 3. addEventListener监听事件,手动触发 this指向如果onevent事件属性定义的时候将this作为参数,在函数中获取到该参数是DOM对象.用该方法可以获取当前DOM. 在方法中直接访问this, this指向当前函数所在的作用域.或者说调用函数的对…

off() 方法与 unbind() 方法移除绑定事件的处理程序。one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数

off() 方法移除用.on()绑定的事件处理程序. unbind() 方法移除用.bind()绑定的事件处理程序. 从 jQuery 1.7开始, .on() 和 .off()方法是最好的元素上附加和移除事件处理程序的方法. 常用原型区别: .unbind( eventType [, handler ] ) .off( events [, selector ] [, handler ] ) off: http://www.365mini.com/page/jquery-off.htm unbi…

jquery事件之事件处理函数

一.事件处理方法名说明语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数.没用on关键字 jQueryObject.bind( events [, data ], handler ) One 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数.只绑定一次 jQueryObject.one( events [, data ], handler …

one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

one(type,[data],fn) 概述为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数. 在每个对象上,这个事件处理函数只会被执行一次.其他规则与bind()函数相同.这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为.如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false. 多数情况下,可以把事件处理函数定义为匿名函数(见示例一).在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理函数则…

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

on(events,[selector],[data],fn) 概述在选择元素上绑定一个或多个事件的事件处理函数.大理石平台精度等级 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素.在jQuery 1.7中,.on()方法提供绑定事件处理程序所需的所有功能.帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off().要附加一个事件,只运行一次,然后删除自己, 请参阅.one(…

JavaScript移除绑定在元素上的匿名事件处理函数

前言: 面试的时候有点蒙,结束之后想想自己好像根本就误解了面试官的问题,因为我理解的这个问题本身就没有意义.但是当时已经有一些思路,但是在一个点上被卡住. 结束之后脑子瞬间灵光,想出了当时没有迈出的那一小步.所以不想计较这个问题本身的意义,单纯的想要把这个我理解错了的问题解决,就当是满足自己一个小小的愿望吧. 问题: 用addEventListener()和attachEvent()给一个DOM元素绑定事件处理程序时,如果传入一个匿名函数,那么用相应的removeEventListener()和…

js跨浏览器的事件处理函数

/* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+ty…

javascript学习笔记（四）：事件处理函数和动态创建html标记。

1 HTML的事件属性全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发的事件(应用到 <body> 标签),常用的为onload. b. Form事件,由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):常用的为onblur.onfocus.onselect.onsubmit. c. keybord事件 d.Mous…

把多个JavaScript函数绑定到onload事件处理函数上

为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: window.onload = userFunction 但如果有两个函数:firstFunction() 和 secondFunction(),都想让它们在页面加载完毕后得到执行,该怎么办?如果这样: window.onload = firstFunciton; window.onload = secondFunction; 只有最后一个函数能被执行.由此可得:每个事件处理函数只能绑定一条指令.…

W3C和IE中的事件处理函数

在上一篇文章中提到了关于传统的JS中注册事件对象的一些缺点和问题,下面是关于DOM2级的现代事件绑定.本文中设计到的HTML文件在文章最后一.W3C事件处理函数 “DOM2 级事件”定义了两个方法,用于添加事件和删除事件处理程序的操作:addEventListener()和 removeEventListener().所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:事件名.函数.冒泡或捕获的布尔值(true 表示捕获,false 表示冒泡).看看这两个方法在上一篇文章中的几个…

js中关于事件处理函数名后面是否带括号的问题

今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Level 2.这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获. DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处…

c#教程之事件处理函数的参数

事件处理函数一般有两个参数,第一个参数(object sender)为产生该事件的对象的属性Name的值,例如上例单击标题为红色的按钮,第一个参数sender的值为button1.如上例标题为红色的按钮和标题为黑色的按钮使用同一个单击事件处理函数,其事件处理如下:private void button1_Click(object sender,System.EventArgs e){ if(sender==button1)label1.ForeColor=Color.Red;elselabe…

js 中用Dom2级事件处理函数(改变样式)

下面这些客户端 javascript代码用到了事件,它给一个很重要的事件--“load" 事件注册了一个事件处理程序.同时展示了注册”click“事件处理函数更高级的一种方法 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <b…

前端魔法堂：onsubmit和submit事件处理函数怎么不生效呢？

前言最近在用Polymer增强form,使其支持表单的异步提交,但发现明明订阅了onsubmit和submit事件,却怎么也触发不了.下面我们将一一道来. 提交表单的方式表单仅含一个以下的元素时,该元素得到焦点,按回车键,即可发起表单提交. input[type=text] input[type=password] input[type=email] input[type=url] input[type=tel] input[type=number] input[type=search]…

jQuery总结--版本二事件处理函数

一:事件处理函数 (1) one(事件名称, fn) 仅对指定事件监听一次,监听事件只会执行一次 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <h1>仅进行一次…

Javascript 4.3 事件处理函数

鼠标指针悬停在某个元素上时触发一个动作:onmouseover事件处理函数鼠标指针离开某个元素时触发一个动作:onmouseout事件处理函数点击某个链接时触发一个动作:onclick事件处理函数 this关键字:摘取当前对象…

winform判断一个事件是否已经绑定了事件处理函数

public static class ComponentHelper<T> where T : Control { public static bool HaveEventHandler(T control, string eventName, string methodName) { //获取Button类定义的所有事件的信息 PropertyInfo pi = (typeof(T)).GetProperty("Events", BindingFlags.Instanc…

accept()函数用来告诉Qt，事件处理函数“接收”了这个事件，不要再传递；ignore()函数则告诉Qt，事件处理函数“忽略”了这个事件，需要继续传递（看一下QWidget::mousePressEvent的实现，最为典型。如果希望忽略事件，只要调用父类的响应函数即可）

QEvent的accept()和ignore()一般不会用到,因为不如直接调用QWidget类的事件处理函数直接,而且作用是一样的,见下面的例子. 推荐直接调用QWidget的事件处理函数.而不是调用accept()和ignore(). 只有一种情况下,必须使用调用accept()和ignore(),那就是closeEvent(),在closeEvent()的事件处理函数中,必须调用accept()和ignore().即如果想窗口被关闭,那么必须显示调用event->accept():如果不想关…

JS---DOM---为同一个元素绑定多个不同事件指向同一个事件处理函数

为同一个元素绑定多个不同事件指向同一个事件处理函数 1. 用了switch(e.type){} 来修改 2. break <input type="button" value="小苏" id="btn" /> <script src="common.js"></script> <script> //为同一个元素绑定多个不同的事件,指向相同的事件处理函数 my$("btn…

js中绑定事件处理函数，使用event以及传递额外数据

IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}; 2. 绑定事件var atta…

【（转）React事件处理函数必须使用bind(this)的原因】的更多相关文章