React学习笔记（5）--事件

分类： web前端2015-08-29 08:42 33人阅读 评论(0) 收藏 举报

1.事件处理函数的使用

组件：

  • React 自有方法
  • 用户定义方法

事件处理函数可以接受event参数；

如之前用过的：

[html] view plaincopy

  1. //监听内容的变化并且记录在状态中
  2. handleChange: function(event){
  3. this.setState({inputText: event.target.value});
  4. },
  5. //添加提交按钮并打印结果
  6. handleSubmit: function () {
  7. console.log("reply To" + this.props.selectName + "\n"
  8. + "\n" + this.state.inputText);
  9. },

编写完事件后需要绑定事件处理函数

如：

[html] view plaincopy

  1. onChange={this.handleChange}

[html] view plaincopy

  1. <pre class="html" name="code">onChange={this.handleChange}


事件；


1》触摸类事件：只会在移动设备中产生，对手的移动位置进行检测并做出响应


    

  • onTouchCancel:
    • 

  • onTouchEnd
    • 

  • onTouchMove
    • 

  • onTouchStart
    • 



2》键盘类事件：


    

  • onKeyDown
    • 

  • onKeyUp
    • 

  • onKeyPress
    • 



3》剪切类事件


    

  • onCopy
    • 

  • onCut
    • 

  • onPaste
    • 



4》 表单类事件


    

  • onChange
    • 

  • onInput
    • 

  • onSubmit
    • 



5》 焦点类事件


    

  • onFocus ： 获得焦点
    • 

  • onBlur ： 失去焦点
    • 



6》UI元素： 元素或页面的滚动事件


    

  • onScroll
    • 



7》滚动事件：监听滚动位置，方向


    

  • onWheel
    • 



8》鼠标类事件：


    

  • onClick
    • 

  • onContextMenu ：右键，上下文菜单
    • 

  • onDoubleClickc
    • 

  • onMouseEnter
    • 

  • onMouseDown
    • 

  • onMouseLeave
    • 

  • onMouseMove
    • 

  • onMouseOut
    • 

  • onMouseOver
    • 

  • onMouseUp
    • 



9》鼠标拖拽事件： 上传内容


    

  • onDrop
    • 

  • onDrag
    • 

  • onDragEnd
    • 

  • onDragEnter
    • 

  • onDragExit
    • 

  • onDragLeave
    • 

  • onDragOver
    • 

  • onDragStart
    • 



实例1：


[html] view plaincopy



    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head lang="en">
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title></title>
    6. 

  6. <script src="build/react.js"></script>
    7. 

  7. <script src="build/JSXTransformer.js"></script>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <script type="text/jsx">
    11. 

  11. var style = {
    12. 

  12. color : "red",
    13. 

  13. border: "1px #000 solid"
    14. 

  14. };
    15. 

  15. var HelloWorld = React.createClass({
    16. 

  16. handleChange: function (event) {
    17. 

  17. console.log(event.target.value);
    18. 

  18. },
    19. 

  19. render: function () {
    20. 

  20. return <div>
    21. 

  21. <input onChange={this.handleChange} />
    22. 

  22. </div>;
    23. 

  23. },
    24. 

  24. });
    25. 

  25. React.render(<div style={style}>
    26. 

  26. <HelloWorld></HelloWorld>
    27. 

  27. </div>, document.body);
    28. 

  28. </script>
    29. 

  29. </body>
    30. 

  30. </html>
    31. 






2 事件对象：


[html] view plaincopy



    

  1. event.target.value
    2. 




target：事件对象的属性， 事件应得DOM元素



事件对象的属性：


1》通用属性


    

  • boolean  bubbles : 事件是否可以冒泡
    • 

  • boolean cancelable : 事件是否可以取消
    • 

  • DOMEventTarget currentTarget :
    • 

  • boolean defaultPrevented : 事件是否禁止默认行为
    • 

  • number eventPhase : 事件所处的阶段
    • 

  • boolean isTrusted : 事件是否可信，可信事件即用户自定义触发的事件，不可信事件即用js代码触发的事件
    • 

  • DOMEvent nativeEvent  使用原生的浏览器发出的事件对象
    • 

  • void preventDefault() : 禁止默认行为
    • 

  • void stopPropagation() ： 禁止冒泡
    • 

  • DOMEventTarget target:
    • 

  • number timeStamp
    • 

  • string type
    • 



2》不同事件对象特有的属性



i  剪切事件：


    

  • DOMDataTransfer clipboardDate : 得到剪切数据
    • 



ii 键盘事件：


    

  • boolean altKey ; 是否按下alt键
    • 

  • Number charCode ；按键的编码; 字符编码
    • 

  • boolean ctrlKey ；是否按下ctrl键
    • 

  • function getModifierState(key) ; 是否按下辅助按键ctrl,shift
    • 

  • String key
    • 

  • Number keyCode; 按键编码；非字符
    • 

  • String locale ; 本地化的字符串
    • 

  • Number location ；位置
    • 

  • boolean metaKey; win键
    • 

  • boolean repeat ；按键是否重复
    • 

  • boolean shiftKey； 是否按下shift
    • 

  • Number which ; 通用化的charCode和keyCode
    • 



iii 焦点


    

  • DOMEventTarget relatedTarget :  相关的角度
    • 



iv 鼠标事件


    

  • boolean altKey；
    • 

  • Number button；
    • 

  • Number buttons；
    • 

  • Number clientX;
    • 

  • Number clientY; 当前鼠标所处的坐标, 顶点是浏览器窗口的左上角
    • 

  • boolean ctrlKey
    • 

  • function getModifierState(key);
    • 

  • boolean metaKey;
    • 

  • Number pageX
    • 

  • Number pageY; 顶点时html页面的左上角
    • 

  • DOMEventTarget relatedTarget ;
    • 

  • Number screenX；
    • 

  • Number scrrenY; p
    • 

  • boolean shiftKey;
    • 





v 触摸事件：


    

  • boolean altKey
    • 

  • DOMTouchList changedTouchs
    • 

  • boolean ctrlKey
    • 

  • function getModifierState(Key)
    • 

  • boolean metaKey
    • 

  • boolean shiftKey
    • 

  • DOMTouchList targetTouches
    • 

  • DOMTouchList touches
    • 




vi UI元素


    

  • Number detail ： 滚动的距离
    • 

  • DOMAbstractView view ： 视图
    • 



vii 滚动：


    

  • Number deltaMode: 单位
    • 

  • Number deltaX
    • 

  • Number deltaY
    • 

  • Number deltaZ 在坐标轴上对应的位置
    • 



实例1


[html] view plaincopy



    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head lang="en">
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title></title>
    6. 

  6. <script src="build/react.js"></script>
    7. 

  7. <script src="build/JSXTransformer.js"></script>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <script type="text/jsx">
    11. 

  11. var HelloWorld = React.createClass({
    12. 

  12. getInitialState: function () {
    13. 

  13. return{
    14. 

  14. backgroundColor:‘#FFFFFF‘
    15. 

  15. }
    16. 

  16. },
    17. 

  17. handleWheel: function (event) {
    18. 

  18. var newColor=(parseInt(this.state.backgroundColor.substr(1),16) +
    19. 

  19. event.deltaY * 997).toString(16);
    20. 

  20. newColor = ‘#‘ + newColor.substr(newColor.length - 6).toUpperCase();
    21. 

  21. this.setState({
    22. 

  22. backgroundColor: newColor
    23. 

  23. });
    24. 

  24. },
    25. 

  25. render: function () {
    26. 

  26. console.log(this.state);
    27. 

  27. return <div onWheel={this.handleWheel} style={this.state}>
    28. 

  28. <p>Hello World</p>
    29. 

  29. </div>;
    30. 

  30. },
    31. 

  31. });
    32. 

  32. React.render(
    33. 

  33. <HelloWorld></HelloWorld>
    34. 

  34. , document.body);
    35. 

  35. </script>
    36. 

  36. </body>
    37. 

  37. </html>
    38. 



实例2


[html] view plaincopy



    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head lang="en">
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title></title>
    6. 

  6. <script src="build/react.js"></script>
    7. 

  7. <script src="build/JSXTransformer.js"></script>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <script type="text/jsx">
    11. 

  11. var HelloWorld = React.createClass({
    12. 

  12. getInitialState: function () {
    13. 

  13. return {
    14. 

  14. password: ‘‘
    15. 

  15. }
    16. 

  16. },
    17. 

  17. handleKeyPress: function (event) {
    18. 

  18. this.setState({
    19. 

  19. password: this.state.password + event.which
    20. 

  20. });
    21. 

  21. console.log(this.state)
    22. 

  22. },
    23. 

  23. handleChange: function (event) {
    24. 

  24. event.target.value = ‘‘;
    25. 

  25. },
    26. 

  26. render: function () {
    27. 

  27. return <div>
    28. 

  28. <input onKeyPress={this.handleKeyPress} onChange={this.handleChange}/>
    29. 

  29. <p style={{‘display‘:this.state.password.indexOf(‘495051‘)>=0 ? ‘inline‘
    30. 

  30. :‘none‘
    31. 

  31. }}>You got it</p>
    32. 

  32. </div>
    33. 

  33. },
    34. 

  34. });
    35. 

  35. React.render(
    36. 

  36. <HelloWorld></HelloWorld>
    37. 

  37. , document.body);
    38. 

  38. </script>
    39. 

  39. </body>
    40. 

  40. </html>
    41. 




3  事件和状态关联


this.setState()



实例1：


[html] view plaincopy



    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head lang="en">
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title></title>
    6. 

  6. <script src="build/react.js"></script>
    7. 

  7. <script src="build/JSXTransformer.js"></script>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <script type="text/jsx">
    11. 

  11. var HelloWorld = React.createClass({
    12. 

  12. getInitialState: function () {
    13. 

  13. return {
    14. 

  14. x:0,
    15. 

  15. y:0
    16. 

  16. }
    17. 

  17. },
    18. 

  18. handleMouseMove: function (event) {
    19. 

  19. this.setState({
    20. 

  20. x:event.clientX,
    21. 

  21. y:event.clientY
    22. 

  22. })
    23. 

  23. },
    24. 

  24. render: function () {
    25. 

  25. return <div onMouseMove={this.handleMouseMove} style={{
    26. 

  26. height:‘1000px‘,
    27. 

  27. width:‘700px‘,
    28. 

  28. backgroundColor: ‘gray‘
    29. 

  29. }}>
    30. 

  30. {this.state.x + ‘, ‘ + this.state.y}
    31. 

  31. </div>
    32. 

  32. },
    33. 

  33. });
    34. 

  34. React.render(
    35. 

  35. <HelloWorld></HelloWorld>
    36. 

  36. , document.body);
    37. 

  37. </script>
    38. 

  38. </body>
    39. 

  39. </html>
    40. 








视频课程： 极客学院
				


				
时间： 2024-10-12 11:40:53 

		


		


	

	
	

		


		
React学习笔记（5）--事件的相关文章


						

		

			

                Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle&lt;T&gt;
			

		

		

									

				Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T> 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现和源码 下一篇用它们做一个多语言的demo 这两个是事件的订阅和广播,很强大,但用的时候要小心发生不必要的冲突. 先看一下它的实现思想 在Caliburn.Micro里EventAggregator要以单例的形式出现这样可以			

		

	

				

		

			

                学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
			

		

		

									

				学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e			

		

	

				

		

			

                IOS学习笔记-触摸事件
			

		

		

									

				一.事件传递的过程1.用户手指触摸屏幕,产生一个事件对象 2.系统会将这个事件对象添加到事件队列(先进先出)中 3.由UIApplication取出事件队列中的事件对象进行处理 4.UIApplication会先将事件对象传递给主要的UIWindow(当然,要先检测UIWindow是否能够接收和传递事件) 5.UIWindow会遍历所有的子控件,看看触摸点有没有落在某个子控件上面: 1> 如果触摸点没有落在子控件上,那么就由UIWindow直接处理这个事件,事件传递完毕 2> 如果触摸点落在子			

		

	

				

		

			

                Symfony2学习笔记之事件分配器
			

		

		

									

				----EventDispatcher组件使用 简介:       面向对象编程已经在确保代码的可扩展性方面走过了很长一段路.它是通过创建一些责任明确的类,让它们之间变得更加灵活,开发者可以通过继承这些类创建子类,来改变它们的行为.但是如果想将某个开发者的改变跟其它已经编写了自己子类的开发者共享,这种面向对象的继承就不再那么有用了. 举一个现实的实例,你想为你的项目提供一个插件系统.一个能够被添加到方法的插件,或者在方法执行的前后完成某些工作,而不会干扰到其它插件.这个通过单一的继承完成不是一个			

		

	

				

		

			

                React学习笔记 - 组件&amp;Props
			

		

		

									

				React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件接收props,返回react元素. 1. 函数定义\类定义组件 最简单组件方式 - 函数定义组件: // 函数定义组件 function Welcome(props) { return <h1>Hello, {props.name}!</h1>			

		

	

				

		

			

                React学习笔记-1-什么是react，react环境搭建以及第一个react实例
			

		

		

									

				什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 			

		

	

						

		

			

                react学习笔记1
			

		

		

									

				# 1.hello world 学习一个语言,最好的方式,我们需要去官网去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo.目前为止最新版本为15.3.0,后续没有特别说明,我们都是基于该版本. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g			

		

	

				

		

			

                react学习笔记4
			

		

		

									

				<header class="site-header jumbotron"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h1>欢迎来到妙味课堂</h1> <p class="lead">妙味课堂是一支独具特色的IT培训团队,妙味反对传			

		

	

				

		

			

                react学习笔记3
			

		

		

									

				<div id="demo"></div> <script type="text/babel"> var ItemComponent = React.createClass({ render:function (){ return ( <li>{this.props.item}</li> ) } }); var ListComponent = React.createClass({ render:funct