js或者angular获取img图片的src（$event.target和this的使用）

最新推荐文章于 2021-12-07 10:35:13 发布

Mars-xq

最新推荐文章于 2021-12-07 10:35:13 发布

阅读量1.1w

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_31057219/article/details/70211370

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

参考：

彻底弄懂事件冒泡和事件捕获

<section ng-repeat="brand in brands track by $index"  class="brandElistSe">
    <ul class="check_fu">
        <li class="brandElist" ng-repeat="brList in brand">
            <a href="###" ng-click="brandFnc($event)">{{brList}}</a> 
        </li>
    </ul>
</section>

$scope.brandFnc = function($event) {
    // 通过 $event.target 来获取
}

参考：

AngularJs在ng-click函数中如何获取代表当前元素的DOM对象

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery.js"></script>
    <script src="../angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
    <img src="quiz_pic04.png">

    <button onclick="getSrc(this)">获取src</button>

    <button ng-click="ngGetSrc($event)">获取src</button>

    <i ng-click="ngGetSrcAgain($event)">
        <img src="photo_pic02.png">
    </i>
</div>

<script>
    //ng-click怎样获取当前元素
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.ngGetSrc = function (ev) {
            console.log(ev.target);
            //<button ng-click="ngGetSrc($event)">获取src</button>
            console.log(ev.target.parentElement);//
//              <div>
//                <img src="quiz_pic04.png">
//                <button onclick="getSrc(this)">获取src</button>
//                <button ng-click="ngGetSrc($event)">获取src</button>
//                <i ng-click="ngGetSrcAgain($event)">
//                  <img src="photo_pic02.png">
//                </i>
//              </div>
            console.log(ev.target.parentElement.children[0].src);
            //http://localhost:63343/untitled19/app/xiangce/quiz_pic04.png
            console.log(ev.target.previousElementSibling);
            //<button onclick="getSrc(this)">获取src</button>
            console.log(ev.target.nodeName);//BUTTON
            console.log(ev.target.outerHTML); 
            //<button ng-click="ngGetSrc($event)">获取src</button>
            console.log(ev.target.innerHTML);//获取src
        };

        $scope.ngGetSrcAgain = function (ev) {
            console.log(ev.target);
            //注意：此时target不是i节点，而是img节点

            //<img src="photo_pic02.png">
            console.log(ev.target.parentElement);
//            <i ng-click="ngGetSrcAgain($event)">
//                <img src="photo_pic02.png">
//            </i>
            console.log(ev.target.src);
            //http://localhost:63343/untitled19/app/xiangce/photo_pic02.png
            console.log(ev.target.parentElement.children[0].src);
            //http://localhost:63343/untitled19/app/xiangce/photo_pic02.png
            console.log("previousElementSibling===" + ev.target.previousElementSibling);
            //null
            console.log("nodeName===" + ev.target.nodeName);//IMG
            console.log("outerHTML===" + ev.target.outerHTML);//<img src="photo_pic02.png">
            console.log("innerHTML===" + ev.target.innerHTML);//空
        };


    });

    //js 的 onclick 获取图片的src
    var getSrc = function (who) {
        var src = $(who).parent().children('img:first-child').attr("src");//方法一
        console.log(src);//quiz_pic04.png
        var src1 = $(who).parent().find("img")[0].src;//方法二
        console.log(src1);//http://localhost:63343/untitled19/app/xiangce/quiz_pic04.png
        var pre = $(who).prev().attr("src");//方法三
        console.log(pre);//quiz_pic04.png

        console.log($(who));//[button, context: button]
        console.log($(who).prev());//[img, prevObject: m.fn.init[1], context: button]
        console.log($(who).parent());//[div, prevObject: m.fn.init[1], context: button]
        console.log($(who).parent()[0].tagName);//DIV
        console.log($(who).parent().children('img:first-child')[0].tagName);//IMG
    }
</script>
</body>
</html>

this和event.target的区别：

每次触发DOM事件时会产生一个事件对象（也称event对象），此处的参数e接收事件对象。而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>e.target</title>
    <script src="../jquery.js"></script>
</head>
<body>
<div id="temp"></div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    <li>第一行
        <ul>
            <li>这是公告标题1</li>
            <li>这是公告标题2</li>
            <li>这是公告标题3</li>
            <li>这是公告标题4</li>
        </ul>
    </li>
</ul>
<script>
    $(function () {
        $("li").on("click", function (e) {
            console.log("e.target==="+e.target);
            console.log("this==="+this);
            $("#temp").html("clicked: " + e.target.nodeName);

            /*不冒泡*/
            $(e.target).css("color", "#FF3300");//点击标题4 只有第四个变蓝色
            /*冒泡*/
//            $(this).css("color", "#0000ff");//点击标题4 都变蓝
        })
    });
</script>
</body>
</html>

Mars-xq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js或者angular获取img图片的src（$event.target和this的使用）

参考：彻底弄懂事件冒泡和事件捕获&lt;section ng-repeat="brand in brands track by $index" class="brandElistSe"&gt; &lt;ul class="check_fu"&gt; &lt;li class="brandElist" ng-repeat="brList in br
复制链接

扫一扫