我的JavaScript回顾之路_05—0210—js和jq绑定事件的区别/事件冒泡

阿狸与含羞草111

于 2018-02-11 15:01:30 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/zsqRr123456/article/details/79310149

版权

1、jq

$().on('click'/'input'/'change', function(){console.log(this) console.log(this.val())})

$().click(); $().val(num); $().hide(); $().hasClass(); $().removeClass(); $().addClass()

单个$().css('','') 多个$().css('':'','':'',...)

2、js

dom上绑定事件 onClick="click()" onInput="input()" onChange="change()"

document.querySelector().style.display = 'none';

function add(btn){console.log(btn) console.log(this.value)}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js"></script>
</head>
<body>
	<button class="btn" οnclick="btnClick(this)">点我上传</button>
	<input type="file" class="file">
	<div>
		<button class="addNum" onClick="add(this)">+</button>
		<input class="num" type="text" style="width: 40px; text-align:center" value="1" onInput="numInput(this)">
		<button class="subNum" onClick="sub(this)">-</button>
		<div class="showNum"></div>
	</div>
	<script>
		//file点击效果
		//jq方法
		// $(function(){//加载事件
		// 	$(".file").hide();
		// 	$(".btn").on('click', function(){
		// 		$(".file").click();
		// 	})
		// })
		//js方法
		var file = document.querySelector('.file');
		file.style.display = 'none';
		function btnClick(btn){
			file.click();
		}
		// //数据加减运算
		//jq方法
		// $(function(){
		// 	$(".addNum").on("click", function(){
		// 		var num = $(".num").val();
		// 		num++;
		// 		$(".num").val(num);
		// 	})
		// 	$(".subNum").on("click", function(){
		// 		var num = $(".num").val();
		// 		num--;
		// 		if(num == 0){
		// 			return num = 1;
		// 		}
		// 		$(".num").val(num);
		// 	})
		// 	$(".num").on("input", function(){
		// 		this.value = this.value.replace(/[^\d]/g,'');
		// 	})
		// })
		// // js方法
		var input = document.querySelector('.num');
		function add(btn){
			var num = input.value;
			num++;
			input.value = num;
		}
		function sub(btn){
			var num = input.value;
			num--;
			if(num == 0)
			{
				return num = 1;  
			}
			input.value = num;
		}
		function numInput(btn){
			btn.value = btn.value.replace(/[^\d]/g,'');
			var num = btn.value;
		}
		// $(function(){
		// 	$(".num").on('change', function(){
		// 	})
		// 	$(".num").on('input', function(){
		// 		console.log(this)
		// 		console.log(this.value)
		// 	})
		// })
	</script>
</body>
</html>

3、js事件冒泡和传递

事件冒泡：在父级和子级元素同时绑定相同点击事件，当子级元素触发点击事件时其父级点击事件也会被触发。

事件捕获：事件冒泡相反。

事件委托：解决事件冒泡的方法在父级元素上绑定点击事件。

阻止事件冒泡

</div>

console.log(obj, event)

alert(2);
var e = event ? event : window.event;
window.event ? e.cancelBubble = true : e.stopPropagation();
}

</script>

阿狸与含羞草111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的JavaScript回顾之路_05—0210—js和jq绑定事件的区别/事件冒泡

1、jq$().on('click'/'input'/'change', function(){console.log(this) console.log(this.val())})$().click(); $().val(num); $().hide(); $().hasClass(); $().removeClass(); $().addClass()单个$().css('...
复制链接

扫一扫

我的JavaScript回顾之路_05—0210—js和jq绑定事件的区别/事件冒泡

“相关推荐”对你有帮助么？