给html元素的onclick事件传递参数(即如何获取html标签的data-*属性&直接传参方法)

最新推荐文章于 2024-05-13 20:14:17 发布

SunshineForU

最新推荐文章于 2024-05-13 20:14:17 发布

阅读量4.3w

点赞数 7

分类专栏：前端开发 iOS 文章标签： html iOS

本文链接：https://blog.csdn.net/Sunshine586983/article/details/54693624

版权

iOS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端开发

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <script src="js/jquery/jquery.min.js"></script>
         <script>
             $(document).ready(function(){
                 $(".title").click(function(){
                     var id=$(this).data("id");
                     var name=$(this).data("name");
                     alert("Id: "+id+" ; Name: "+name);});
             });
             
             function onClick(e){
                 var id=e.getAttribute("data-id");
                var name=e.getAttribute("data-name");
                 alert("Id: "+id+" ; Name: "+name);
             }
         </script>
    </head>
    <body>
        <div class="title" data-id="1" data-name="Microsoft">Click Me</div>
        <div id="add" data-id="2" data-name="Google" onclick="onClick(this)">Click Me</div>
    </body>
</html>

<!--诺，这个是把数据直接用自定义的属性加到HTML元素里面，用它的关键好处在于onclick里面没有传变量啊，有木有。用处呢很多了，譬如不小心碰到了一些坑爹的js方法(innerHtml 时添加HTML元素，还要被执行到- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
这样的语句中去，onclick真滴很难传参啊-->

<!--多写点凑字数，吼吼，平时的HTML传参就很爽快了,下面的是WKWebView用的，贴的代码片段喔-->
	<script>
		function UClicked(string) {
			window.webkit.messageHandlers.MHName.postMessage({body: string});}
	</script>
	<body>
		<input type="button" onclick="UClicked("String")" />
	</body>

SunshineForU

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
给html元素的onclick事件传递参数(即如何获取html标签的data-*属性&直接传参方法)

DOCTYPE html>html> head> meta charset="utf-8"> title>title> script src="js/jquery/jquery.min.js">script> script> $(document).ready(function(){
复制链接

扫一扫