개발일지

이벤트 연결 본문

javascript/jquery

이벤트 연결

eodovo 2022. 9. 5. 12:14
728x90

1) bind()메소드

*$(선택자).bind(eventName, function(event){  })
      $(선택자).bind(object)
     *이벤트 핸들러 안에서 this키워드는 이벤트를 발생한 객체.

 

 

2)$(선택자)/on('이벤트',function() {}) 메소드

 

3)$(선택자).이벤트(function (){ })

 

기타)  $(선택자).toggle(function(//홀수번째 계산){}, function()//{짝수번째 계산});

 

          $(선택자).toggle(function(//1번째계산){}, function(){//2번째계산},function(){//3번째계산}); -> 배수 계산

 

          $(선택자).hover(function(//mouseenter){}, function()//{mouseleave});

 

 

 

이벤트 동시에 발생 문제 *****(이벤트 버블링)

* $(선택자).text('텍스트'); / 변수 = $(선택자).text();

* $(선택자)attr('속성','값') / 변수 = $(선택자).attr('속성')

* $(선택자)attr('속성','값') / 변수 = $(선택자).src('속성')

 

 

const header =$('h1',this).text();

const pharagraph =$('p',this).text();

this 키워드를 $()메소드의 두번쨰 매개변수로 넣어준다.

범위를 이벤트 발생 객체로 한정한다.

이벤트 발생 객체 안에만 선택자를 적용할 수 있다.

    <style>
        * {
            margin: 0px;
            padding: 0px
        }

        div {
            width: 200px;
            margin: 5px;
            padding: 3px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box1">
        <h1>Header 1</h1>
        <p>Paragraph1</p>
        <img src="./images/a1.jpg" alt="asd">
    </div>
    <div>
        <h1>Header 2</h1>
        <p>Paragraph2</p>
        <img src="./images/a2.jpg" alt="">
    </div>
    <div>
        <h1>Header 3</h1>
        <p>Paragraph3</p>
        <img src="./images/a3.jpg" alt="">
    </div>

    <script>
        $('div').click(function () {
            let header = $(' h1', this).text();
            let paragraph = $('p', this).text();

            let att = $(' img', this).attr('alt');
            let sty = $('div').css('border')

            alert(header + '\n' + paragraph + '\n' + att + '\n' + sty)
        })

    </script>

 

 

예제1

<body>
    <div class="qanda">
        <p class="q">
            <a class="trigger" href="#">
                제가 갖고 있는 물품을 기부하고 싶은데요. 어떻게 하면 되나요?
            </a>
        </p>
        <p class="a">꿈이야기에서 ‘필요한 나눔’으로 등록되어 있는 물품에
            대한 기부를 원하시는 경우 ‘드림애플>아주특별한나눔>특별한나눔’
            에서 기부 의사를 밝히실 수 있습니다. 또는 02-3472-3556(두드림)으로
            바로 연락 주시면 절차와 방법에 대해 안내해드리겠습니다.</p>
    </div>

    <script>

        let cnt = false; //true 열림 false 닫힘 

        function open_close() {

            if (cnt == false) {
                $('.qanda .a').css('display', 'block')
                cnt = true
            } else {
                $('.qanda .a').css('display', 'none')
                cnt = false
            }

        }
        $('.trigger').bind('click', open_close)
    </script>

 

 

객체 값에 함수를 적용한 이벤트

    <style>
        .reverse {
            background: Black;
            color: White;
        }
    </style>
</head>

<body>
    <h2>Header-0</h2>
    <h2>Header-1</h2>
    <h2>Header-2</h2>


    <script>
        $('h2').bind({
            mouseenter: function () { $(this).addClass('reverse') },
            mouseleave: function () { $(this).removeClass('reverse') }
        })

    </script>

함수형 이벤트

    <style>
        .reverse {
            background: Black;
            color: White;
        }
    </style>
</head>

<body>
    <h2>Header-0</h2>
    <h2>Header-1</h2>
    <h2>Header-2</h2>


    <script>

        $('h2').bind('mouseenter', function () {
            $(this).addClass('reverse')
        })
        $('h2').bind('mouseleave', function () {
            $(this).removeClass('reverse')
        })
    </script>

 

 

호버,토글

    <style>
        * {
            margin: 0;
            padding: 0
        }

        a {
            color: #333;
            text-decoration: none
        }

        .qanda {
            width: 500px;
            border: 1px solid #ccc;
            padding: 10px
        }

        .qanda p {
            text-align: justify;
            line-height: 1.5em;
            font-size: 14px
        }

        .qanda .q {
            background: url(images/ico_q.gif) 0 0 no-repeat;
            padding-left: 25px;
            margin-bottom: 10px
        }

        .qanda .a {
            background: url(images/ico_a.gif) 0 0 no-repeat;
            padding-left: 25px;
            display: none
        }
    </style>
</head>

<body>
    <div class="qanda">
        <p class="q">
            <a class="trigger" href="#">
                제가 갖고 있는 물품을 기부하고 싶은데요. 어떻게 하면 되나요?
            </a>
        </p>
        <p class="a">꿈이야기에서 ‘필요한 나눔’으로 등록되어 있는 물품에
            대한 기부를 원하시는 경우 ‘드림애플>아주특별한나눔>특별한나눔’
            에서 기부 의사를 밝히실 수 있습니다. 또는 02-3472-3556(두드림)으로
            바로 연락 주시면 절차와 방법에 대해 안내해드리겠습니다.</p>
    </div>

    <button type="button">클릭 </button>


    <script>
        $('.trigger').hover(function () {
            $('.qanda .a').css('display', 'block')
        }, function () {
            $('.qanda .a').css('display', 'none')
        })



        $('button').toggle(function () {
            $(this).text('클릭1회');
        }, function () {
            $(this).text('클릭2회')
        }, function () {
            $(this).text('클릭3회')
        }, function () {
            $(this).text('클릭4회')
        })
    </script>

탭 attr(속성) 메서드 활용

        #tabMenu ul {
            list-style: none;
            overflow: hidden
        }

        #tabMenu ul li {
            float: left;
        }

        img {
            border: 0;
        }
    </style>
</head>

<body>
    <div id="tabMenu">
        <ul>
            <li><a class="menu1" href="#"><img src="images/tab1.jpg" alt="서적" /></a></li>
            <li><a class="menu2" href="#"><img src="images/tab2.jpg" alt="인쇄" /></a></li>
            <li><a class="menu3" href="#"><img src="images/tab3.jpg" alt="잡지" /></a></li>
        </ul>
    </div>

    <script>
        $('.menu1 img').attr('src', 'images/tab1on.jpg')

        $('.menu1').click(() => {
            $('.menu1 img').attr('src', 'images/tab1on.jpg')
            $('.menu2 img').attr('src', 'images/tab2.jpg')
            $('.menu3 img').attr('src', 'images/tab3.jpg')
        })
        $('.menu2').click(() => {
            $('.menu2 img').attr('src', 'images/tab2on.jpg')
            $('.menu1 img').attr('src', 'images/tab1.jpg')
            $('.menu3 img').attr('src', 'images/tab3.jpg')
        })
        $('.menu3').click(() => {
            $('.menu3 img').attr('src', 'images/tab3on.jpg')
            $('.menu1 img').attr('src', 'images/tab1.jpg')
            $('.menu2 img').attr('src', 'images/tab2.jpg')
        })

 

 

추가 예제

    <style>
        #tabMenu ul {
            list-style: none;
            overflow: hidden
        }

        #tabMenu ul li {
            float: left;
        }

        #tabMenu ul li a {
            display: block;
            padding: 15px;
            color: #333;
            text-decoration: none;
            transition: all .5s;
        }

        #tabMenu ul li .current {
            background: orange;
            color: #fff;
            font-size: 24px;
        }

        img {
            border: 0;
        }

        .tabcon div {
            background: green;
            width: 600px;
            height: 400px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="tabMenu">
        <ul>
            <li><a class="menu1" href="#">교육용참고서적</a></li>
            <li><a class="menu2" href="#">인쇄</a></li>
            <li><a class="menu3" href="#">잡지</a></li>
        </ul>
    </div>

    <div class="tabcon">
        <div>교육용</div>
        <div>인쇄내용</div>
        <div>잡지내용</div>
    </div>

    <script>
        $('.menu1').addClass('current')
        $('.tabcon div:eq(0)').css('display', 'block')

        $('.menu1').addClass('current');
        $('.tabcon div:eq(0)').css('display', 'block')

        $('#tabMenu li a').each(function (index) {
            $(this).on('click', function (e) {
                e.preventDefault();
                $('#tabMenu li a').removeClass('current');
                $(this).addClass('current');

                $('.tabcon div').css('display', 'none')
                $('.tabcon div:eq(' + index + ')').css('display', 'block')

                console.log(this, index)
            })
        })
    </script>

 

토글 예제 (토글이 홀수일때,짝수일때)

<body>
    <div style="width: 400px;border:1px solid #ccc; padding:10px;text-align:justify;line-height:1.5em;font-size:14px">
        <p>‘하면 된다’라는 정신을 갖고 목표를 달성하기 위해 온힘을 기울이는 자세를 말한다.</p>
        <a href='#' class="readmore" style="cursor:pointer">Read More...</a>
        <p class="message">현대는 다른 사람들이 불가능하다고 포기해 버린 일을 험난한 여건 속에서도 강인한 정신력과 추진력으로 성공시킨 역사와 경험을 가지고 있다. 앞으로 세계 곳곳에서 사업을
            수행하는데 있어서 성취해야 할 많은 과제를 과감히 헤쳐나가기 위해서는 현대인 모두가 강인한 정신과 추진력을 더욱 배양하고 체질화해야 할 것이다.</p>
    </div>

    <script>
        $('.message').hide();

        $('.readmore').toggle(function (e) {
            e.preventDefault();
            $('.message').show();
            $(this).text('read less?')
        }, function () {
            $('.message').hide()
            $(this).text('reade more?')
        })

    </script>
저작자표시

'javascript > jquery' 카테고리의 다른 글

네비게이션 예제  (0) 2022.09.06
시각적 효과  (0) 2022.09.05
문서 조작 메서드  (0) 2022.09.05
스타일 메서드  (0) 2022.09.02
제이쿼리 기초 문법  (0) 2022.09.02
'javascript/jquery' Related Articles more
Comments