码迷,mamicode.com
首页 > 其他好文 > 详细

jq3

时间:2018-08-21 22:39:27      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:document   key   mouse   lang   .text   html   使用   charset   http   

事件流:false为冒泡  true为捕获

  技术分享图片

var oBtn = document.getElementById(‘btn‘);

        oBtn.addEventListener(‘click‘,function(){
            console.log(‘btn处于事件捕获阶段‘);
        }, true);
        oBtn.addEventListener(‘click‘,function(){
            console.log(‘btn处于事件冒泡阶段‘);
        }, false);

        document.addEventListener(‘click‘,function(){
            console.log(‘document处于事件捕获阶段‘);
        }, true);
        document.addEventListener(‘click‘,function(){
            console.log(‘document处于事件冒泡阶段‘);
        }, false);

        document.documentElement.addEventListener(‘click‘,function(){
            console.log(‘html处于事件捕获阶段‘);
        }, true);
        document.documentElement.addEventListener(‘click‘,function(){
            console.log(‘html处于事件冒泡阶段‘);
        }, false);

        document.body.addEventListener(‘click‘,function(){
            console.log(‘body处于事件捕获阶段‘);
        }, true);
        document.body.addEventListener(‘click‘,function(){
            console.log(‘body处于事件冒泡阶段‘);
        }, false);

单击:click

双击:dbclick

mouseover 鼠标悬浮

moseout  鼠标移出

mouseenter 鼠标进入

mouseleave 鼠标离开

focus聚焦了

blur失焦

在使用form表单时要注意当不使用它的提交功能时进行以下操作:也就是将它的默认清除同a

$(‘form‘).submit(function (event) {
				event.preventDefault();
				console.log(1);

然后执行:submitHanlder

键盘码的对比可以进行操作

//回车提交表单
			function submitHanlder () {

				// 提交到后端
				//ajax技术
				 
			}

			$(‘input‘).change(function () {
				console.log(1111);
			})

			// $(‘input‘).keydown(function(event) {
			// 	/* Act on the event */
			// 	console.log(event.which);

			// 	switch (event.which) {
			// 		case 13:
			// 			//回车
			// 			submitHanlder()
			// 			break;
			// 		case 32:
			// 			//空格
			// 			break;
			// 		default:
			// 			// statements_def
			// 			break;
			// 	}
			// });

数据流分为单项数据流和多项数据流

单项:只能网页提交:text,html,val

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	<div class="box"></div>
	<script src="jquery.js"></script>
	<script>
		
		$(function(){
			var obj = {
				name:‘太亮‘,
				age:18
			};
			$(‘.box‘).text(obj.name);
		})
	</script>
</body>
</html>

双项数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<!-- 只适用于在UI控件  input -->

	
	
	<input type="text" value="" >
	<h3></h3>
	<script src="jquery.js"></script>
	<script>
		
		$(function(){
			// 初始化
			var a = ‘123‘;
			$(‘input‘).val(a);
			$(‘h3‘).text(a);





			$(‘input‘)[0].oninput = function (e) {
				console.log(e.target.value);
			
			
				$(‘h3‘).text(e.target.value);

			}


		})
	</script>
</body>
</html>

 事件对象:

event.target 是返回

event.currentTarget

  

  

 

jq3

标签:document   key   mouse   lang   .text   html   使用   charset   http   

原文地址:https://www.cnblogs.com/lnrick/p/9514493.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!